Skip to content


Customising CGridView – CButtonColumn Ajax Update the Grid Using $data

In a previous post I talked about using CButtonColumn for an Ajax update for a ‘status’ value in the grid data: . That included a simple refresh of the grid using:$.fn.yiiGridView.update(“my-grid”).

This time I have been working on a ‘categories’ grid view. The data includes sub categories using a ‘parent_id’ column. The first thing we want is for the gridview to initially only display top level categories, those with a parent_id of 0 (zero). Then we want a button (folder icon) which when clicked will display the sub categories of a particular category. The first thing is to modify the model search() method to initially only display top level categories. Below the search criteria we can add the following:

    if(empty($this->parent_id)) {
        $criteria->addCondition('parent_id = 0');

Thats all we need to modify in our model class.

Next we want to display a folder icon button that when clicked will display the sub categories for the selected category. We want this on the left of our CGridview, so we will add a new CButtonColumn before anything else on the grid:

      'class' => 'CButtonColumn',
      'htmlOptions' => array('style'=>'width:40px; text-align:center'),
      'template' => '{subcat}',
		       'subcat' => array
					'label'=>'sub categories',
					'imageUrl'=>'images/icn/foldericn.png',  // make sure you have an image
					'url'=>'Yii::app()->createUrl("admin/categories", array("Categories[parent_id]"=>$data->id))',

The above creates a hard link – you should test this to be sure that it works as expected.

Next we just need the Ajaxify the above, so below the ‘url’ parameter we add:

'click' => "function (){ $.fn.yiiGridView.update('categories-grid', {type:'GET', url:$(this).attr('href')}); return false}"

And thats all there is to it, easy when you know how!

Posted in PHP, Yii Framework.

0 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

Some HTML is OK

or, reply to this post via trackback.

+ two = nine