Yii:Dynamic update ID for AJAX action on CGridView

Question

I'm using Yii 1.1 for implementing a master detail order-order-details grid So far I got his: - basicaly when I click on the detail icon (left icon) - it loads with ajax the detail grid with the oder details (I used a component for this called EAjaxLinkColumn - by default a link column doesn't support ajax)

Here's my code:

<?php     $this->widget('zii.widgets.grid.CGridView', array(
        'id'=>'main-orders-grid',
        'dataProvider'=>$model->search(),
        'filter'=>$model,
        'columns'=>array(

    array (
    'class'=>'EAjaxLinkColumn',
    'header'=>'Details',
    'url'=>Yii::app()->createUrl('mainOrdersDetails/detailview'),
    'imageUrl'=>Yii::app()->request->baseUrl.'/images/zoom_in.png',

          //linkAjaxOptions and linkAjaxOptionsExpression are merged together, so only put the ones
          //that actually need to be evaluated in the latter
          'linkAjaxOptions' => array(
             'type' => 'POST',
             /*'dataType' => 'json',       */
             'update'=>'#id_view',
          ),
          //In this expression, the variable $row the row number (zero-based); 
          //$data the data model for the row; and $this the column object.
          'linkAjaxOptionsExpression' => array(
             'data' => array(
               'id' => '$data->id' //note that $data->id is an expression so must be quoted
             ),
          ),

    ),    

            'id',   
            'storageF.name',
            'date_added',
            'order_number',
            'expected_ship_date',
            'shipped_date',
            'shipping_costs',
            'personF.user',
            'date_to_pay',
            'paid_integraly',
            'paid_partialy',        
            array(
                'class'=>'CButtonColumn',
            ),
        ),
    )); ?>

What I'd like is to load beneath each row it's detail. well I don't know how to do that..as CGridView widget is pretty wierd for a beginer like me in Yii Now it loads always into the same div .. note the

'linkAjaxOptions' => array( 'type' => 'POST', 'update'=>'#id_view', ),

First of all the update option is static.. I would like to use by ID #id_view_1 #id_view_2 and then to somehow insert those empty rows beneath each master row

Probably I could be using Jquery directly and not complicate with CGrid's options?

Answer 1

I think you want this.(move the update property from linkAjaxOptions to linkAjaxOptions as in linkAjaxOptions we can use special variables $data and $row

<?php     $this->widget('zii.widgets.grid.CGridView', array(
        'id'=>'main-orders-grid',
        'dataProvider'=>$model->search(),
        'filter'=>$model,
        'columns'=>array(

    array (
    'class'=>'EAjaxLinkColumn',
    'header'=>'Details',
    'url'=>Yii::app()->createUrl('mainOrdersDetails/detailview'),
    'imageUrl'=>Yii::app()->request->baseUrl.'/images/zoom_in.png',

          //linkAjaxOptions and linkAjaxOptionsExpression are merged together, so only put the ones
          //that actually need to be evaluated in the latter
          'linkAjaxOptions' => array(
             'type' => 'POST',
             /*'dataType' => 'json',       */
          ),
          //In this expression, the variable $row the row number (zero-based); 
          //$data the data model for the row; and $this the column object.
          'linkAjaxOptionsExpression' => array(
             'data' => array(
               'id' => '$data->id' //note that $data->id is an expression so must be quoted
             ),

             'update'=>'\'#id_view_\'.$data->id',//or you can use '\'#id_view_\'.$row'; according to your needs
          ),

    ),    

            'id',   
            'storageF.name',
            'date_added',
            'order_number',
            'expected_ship_date',
            'shipped_date',
            'shipping_costs',
            'personF.user',
            'date_to_pay',
            'paid_integraly',
            'paid_partialy',        
            array(
                'class'=>'CButtonColumn',
            ),
        ),
    )); ?>