CGridView change appearance after Ajax call

Hi All,

I recently asked a question whether it’s possible to have an alternative to the standard pagination provided by CGridView:

I was wondering if it’s possible to change it back to pagination after this ajax request? Currently I remove grid header (displaying records 1-10 of 100) and pagination at the bottom using



I don’t understand what you are trying to do

In general, you can check if you are in an ajaxRequest via Yii::app()->request->isAjaxRequest.

In principle, you can:


Thanks zaccaria, it works great, I didn’t know about this feature! There is only one minor issue - if pager is hidden when page first loads, style sheet of it isn’t included in the page HEAD section, so pager oesn’t look nice…

<link rel="stylesheet" type="text/css" href="/assets/e02ebdd/pager.css" />

What would be the most elegant way to include this file all the time?

Also, I would like to change link text and content after clicking. I tried the following approach but it didn’t work:

if ($viewAll == 0) // $viewAll is set in corresponding controller and get changed after clicking the link to 1.

echo CHtml::link(

        "View All", ...



echo CHtml::link(

        "Hide All", ..



I am happy that you solved the first issue, even thought that I still didn’t get what are you doing.

About include the css, you should do something like:

<?php Yii::app()->clientScript->registerCssFile(Yii::app()->assetManager->publish(Yii::getPathOfAlias('system.web.widgets.pagers.pager').'.css'));?>

About the second question I didn’t get…

Thanks! This worked without any changes.

In the second question I would like to change some code outside of CGridView after ajax call.

Currently I have the following link outside of my CGridView:

echo CHtml::link(

        "View All",


        array('onClick'=>"$.fn.yiiGridView.update('links',{ data:{view_all: 1 }})",




In the controller I check view_all param and make some changes to the CGridView control, for example change pageSize of pagination property from 25 to 100.

This works great, but I can’t find a solution to change this “View all” link to “Hide all” right after clicking, so I could click this “Hide all” link and apply all original settings. After that “View link” will become available again.

I hope this clarifies it, but I can explain in more detail if necessary.


This looks like an hard task…

You can try to do in in the function afterAjaxUpdate of CGridView:


'afterAjaxUpdate'=>'js:function(id, data){$("#showAll").html("Hide All")}'

I also need to change the value of param view_all to 0, so looks like it won’t work…