Yii: Update Cgridview Based On Form Input

I have setup CGridView with CArrayDataProvider

What I’ve got till now:

Controller


//Get data for form dropdown:


        $criteria = new CDbCriteria;

        $criteria->select = 'status';

        $criteria->group = 'status';

        $status_get = Model::model()->findAll($criteria);




            foreach ($status_get as $s) {

                $status[$s->status] = $s->status;

            }


            if(!isset($_GET['ajax'])){

               //Display empty array - show no data before user input

               $rawData=array();


            } else {

                // Here I want to be able to create custom array based on user input (from SQL query)

                $rawData=array();

            }


            $arrayDataProvider=new CArrayDataProvider($rawData, array(

                'id'=>'id',

                /* 'sort'=>array(

                    'attributes'=>array(

                        'id', 'status',

                    ),

                ), */

                'pagination'=>array(

                    'pageSize'=>50,

                ),

            ));


            $params =array(

                'arrayDataProvider'=>$arrayDataProvider,

                'status'=>$status,

            );


            if(!isset($_GET['ajax'])) $this->render('byDay', $params);

            else  $this->renderPartial('byDay', $params);



View:




<?php

/* @var $this RaportController */


$this->breadcrumbs = array(

    'Raport' => array('/raport'),

    'ByDay',

);

?>

<h1><?php echo $this->id . '/' . $this->action->id; ?></h1>


<div class="form">


    <?php $form = $this->beginWidget('CActiveForm', array(

        'id' => 'person-form-edit_person-form',

        'enableAjaxValidation' => false,

        'htmlOptions' => array(

            'onsubmit' => "return false;", /* Disable normal form submit */

            'onkeypress' => " if(event.keyCode == 13){ send(); } " /* Do ajax call when user presses enter key */

        ),

    )); ?>





    <?php


    if (isset($status)) {

        echo CHtml::DropDownList('status', 'attribute', $status);


        $this->widget('zii.widgets.jui.CJuiDatePicker', array(

            'name' => 'day',

            'options' => array(

                'showAnim' => 'fold',

                'showOn' => 'both',


            ),

            'htmlOptions' => array(

                'style' => 'width:80px;vertical-align:top; margin-left:20px'

            ),

        ));

    }


    ?>





    <div class="row buttons">




        <?php echo CHtml::Button('SUBMIT', array('onclick' => 'send();')); ?>




    </div>


    <?php $this->endWidget(); ?>


</div><!-- form -->

<script type="text/javascript">


    function send() {

        var data = $("form").serialize();




        $.ajax({

            type: 'POST',

            url: '<?php echo Yii::app()->createAbsoluteUrl("raport/byDay"); ?>',

            data: data,

            success: function (data) {


            },

            error: function (data) { // if error occured

                alert("Error occured.please try again");

                alert(data);

            }


//            dataType:'html'

        });


    }




</script>


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

    'dataProvider' => $arrayDataProvider,

    'template' => "{items}",

    'htmlOptions' => array(

        'style' => 'margin:8px;'

    ),

    'columns' => array(

        array(

            'name' => 'Order id',

            'value' => 'CHtml::encode($data["order"])',

            'htmlOptions' => array(

                'style' => 'width:50px;'

            )

        ),

        array(

            'name' => 'Status',

            'value' => 'CHtml::encode($data["status"])',

        ),

        array(

            'name' => 'Timestamp',

            'value' => 'CHtml::encode($data["change_ts"])',

        ),

    ),

));

?>



So I’ve got form with dropdown and input outside CGridView. And I want user to select option from dropdown, select date and make SQL query from this values (ajax). Then I want to pass result array to CGridView.

How can I update table with return array?

Please Help… I’m stuck

You need to let CGridView handle the update.




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

    'id'=>'myGrid',

    'dataProvider' => $arrayDataProvider,

    'ajaxUrl'=>array('raport/byDay'),

    'template' => "{items}",

    'htmlOptions' => array(

        'style' => 'margin:8px;'

    ),

    'columns' => array(

        array(

            'name' => 'Order id',

            'value' => 'CHtml::encode($data["order"])',

            'htmlOptions' => array(

                'style' => 'width:50px;'

            )

        ),

        array(

            'name' => 'Status',

            'value' => 'CHtml::encode($data["status"])',

        ),

        array(

            'name' => 'Timestamp',

            'value' => 'CHtml::encode($data["change_ts"])',

        ),

    ),

));

?>



Then your script would look more like this:




<script type="text/javascript">


    function send() {

        $('#myGrid').yiiGridView('update', {

            data: $("form").serialize()

        });

    }


</script>



Whatever you return as a response from this AJAX call make sure the grid is there with the same ID. You can return the whole entire page and CGridView will look for the grid and update just that. You can also return a trimmed down version with just the grid. Either way, you have to return the CGridView widget as a response to the AJAX request.

Also, you might want to have the grid update if the form is submitted. For that change ‘onsubmit’ => “return false;” to something like this somewhere on the page (or the equivalent in ‘onsubmit’):




$('form').submit(function(){

	$('#myGrid').yiiGridView('update', {

		data: $(this).serialize()

	});

	return false;

});



And if you want even more control look at documentation for these properties of CGridView:

afterAjaxUpdate

ajaxUpdate

ajaxUpdateError

ajaxUrl

ajaxVar

beforeAjaxUpdate

http://www.yiiframework.com/doc/api/1.1/CGridView