sort submit button on cgridview header

Yii 1.1 General Discussion
1

How to make Cgridview header to have submit button that will capture all the textfield below?

like this

2 

$('#some-button-id').live('click',function() {

    var data=$('input.some-class-you-added-to-your-inputs').serialize();

    

    // now data is like { somename: 'somevalue', someothername: 'someothervalue', ...}

});
3

is this how I put the button on header? but when I click the button it goes for the default call of the grid title (the sort function) not my button




    array(

      'header'=>'Sort <input type="button" value="updated sort" id="sortall-button">',

      'name'=>'SortOrder',

      'value'=>'"<input type=\"text\" value=\"" . $data->SortOrder . "\">"',

      'type'=>'raw',

    ),







$('#some-button-id').live('click',function() {

    var data=$('input.some-class-you-added-to-your-inputs').serialize();

    

    // now data is like { somename: 'somevalue', someothername: 'someothervalue', ...}

});

where do I put these? register it with clientScript->registerScript? or place it inside the CGridColumn?

Sorry I am still learning…

4

Almost there :). Try this:




   array(

      'header'=>'Sort <input type="button" value="updated sort" id="sortall-button">',

      'name'=>'SortOrder',

      'value'=>'CHtml::textField("sort[$data->id]",$data->SortOrder,array("class"=>"sortMe"));',

      'type'=>'raw',

    ),

First check that this works. It should create your header sort button and a textbox in each row. Also verify the name/value attributes and most important the css class of the generated inputs, i didn’t test this.

If everything looks ok, you can proceed to enhance the grid by attaching the live click handler. This will guarantee, that the button always can be clicked, even if the grid is updated. If that makes problem, better use a unique CSS class, instead of an id, to identify your update button.


$sortUrl=$this->createUrl('yourcontroller/yourSortActionId');

Yii::app()->clientScript->registerScript('initSortUpdate',<<<EOD

$('#sortall-button').live('click',function() {

    var data=$('input.sortMe').serialize();

    // now data is like { 'sort[123]': 1, 'sort[234]': 2, ...}

    // we can use that directly for the POST data in the ajax request.

    // You will get $_POST['sort'][123], ... in your action, where 123 is 

    // the id of the related row.


    $.ajax({

        type:'POST',

        url: '$sortUrl',

        data: data,

        dataType: 'json',

        success: function (d) {

            $.fn.yiiGridView.update('#your-grid-id');

        }

    });

});

EOD

,CClientScript::POS_READY);
5

It works! but can you tell me how to write the js part to send without ajax? Because like previous problem, it is best to reload the whole page to refresh all jquery ids generated by the grid.

One more thing, clicking the button will active the sortall-button AND also the default grid header sort…is this expected?

See attached

AFTER CLICK… notice the arrow button on the header and the calls to backend…

6

If you have a <form> tag around your grid, with action=yourSortAction, you can do also with jquery:

You would replace the $.ajax() with the following code. It might need some fine tuning, though:


$(this).parents('form').submit();

So you see, learning some jQuery is really the key to powerful AJAX applications. You can write cool features with only some lines of code. In my experience it’s whise to keep the js code separated and not e.g. use “onclick” attributes of elements or incorporate everything into the grid column configuration. Instead, add classes to elements that should do something (like “sort-colum-button” or “show-login-button”). So you can easiliy attach js handler to a whole bunch of elements: $(’.show-login-button’).live(‘click’,…);

About the sorting issue: Maybe you have configured "SortOrder" as available sort attribute in your data provider?

EDIT:

After some thinking i wonder, wether you need javascript in this place at all. If you make the button a submit butten, the form will submit as usual.

7

How do I enclose the cgridview with a form the yii way?

or should I just do this?

view.php




<form name="myform" method="POST">


<?php $this->widget('zii.widgets.grid.CGridView', array(

	'id'=>'profileGrid',

	'dataProvider'=>$dataProvider,  

	'columns'=>array(

    array( 

      .....


?>

</form>
8

You could also use CHtml::form() helper to create the form tag.

EDIT: Moved some parts to your other thread :)