CGridView inside of CJuiTabs

Hi all,

I’m using 1.1.0 and have a CGridView widget on a page, site/list, with default ajax pagination and all works nicely. The CGridView widget is actually in a “partial view” file, _list.php, and is embedded on my list page via partial render. When I mouse over any of the page links the url looks something like this:

http://www.domain.com/site/list/ajax/yw0/List_page/5

However, as soon as I render my CGridView via renderpartial inside of a CJuiTabs widget tab, pagination (and sorting) no longer works. If I click on one of the page links the CGridView content on the page flashes quickly but remains on the first page of the grid as before… no update of content is performed. The page link inside of the tab looks something like this:

http://www.domain.com/site/list/_/1269909906218/List_page/5

Is this a known bug or have I maybe done something wrong? Any ideas on how to fix this problem? Thanks in advance.

It’s a known issue… sort of… it’s by design and not sure if it will be fixed or if you’ll always be expected to work around it. The issue is the separation of the javascript logic. When you originally render the page that includes your tabs it generates a CDATA section at the end of the page containing javascript logic (the grid uses the same CDATA section when rendered on it’s own page). The grid doesn’t work inside of the tab because when you do renderPartial it only rewrites the the part of the div that needs rendering (so the CDATA and all the links in the grid are messed up).

The easiest solution is to not intermix ajax widgets. However that’s not always ideal. To get around it you have to generate the ajax links yourself.

Thanks for the reply, Igoss. I spent quite a while working with my code to re-create the pagination feature as suggested. At some point, I stumbled upon a solution using the existing CGridView pager. I’m honestly not 100% sure why this works yet, but here’s what I did:

1. First in my action that was being rendered by/in one of the CJuiTabs, I changed my CDataProvider to manually "feed" it the current page through the pager, like so:

public function actionAjaxstoresadmin()

{

	if(Yii::app()->request->isAjaxRequest && isset($_GET['id']))

	{

		$model = $this->loadModel();


		$criteria = new CDbCriteria;

		$criteria->addCondition('market_id='.$model->market_id);

		$criteria->order = 'store_number';

		

		$pager = new CPagination(Store::model()->count($criteria));

		$pager->pageSize = self::PAGE_SIZE;

		$pager->currentPage = isset($_GET['page'])?($_GET['page']-1):0;

		

		$dataProvider=new CActiveDataProvider('Store', array(

			'criteria'=>$criteria,

			'pagination'=>$pager,

		));


		echo $this->renderPartial('_stores', array(

			'model'=>$model,

			'storeDataProvider'=>$dataProvider,

		),true,true);

		Yii::app()->end();

	}

}

2. Next, there are two things to change in the partial view file. First, wrap the CGridView widget in a new div so that a parent container exists to be updated. Then, give the CGridView a defined id so that it doesn’t default to ‘yw0’ and conflict with other widgets by that id. Like so:

<div id="storesgrid">

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

	'id'=>'storesgrid',

	'dataProvider'=>$storeDataProvider,

	'columns'=>array(

		//...

	),

	//...

);

</div>

With those changes in place my default CGridView pagination still works inside of a CJuiTabs tab!

Ah, right. Catching the ajax call and rebuilding the paging yourself works too. Nice solution, glad you got it working

I am experiencing a similar issue. I have a drop down containing major categories and an ajax button which deletes everything about a category but calls different action than admin. When I delete a particular cat I would like to update the cgridview with the remaining data. The problem is that the ajax button calls an action different than admin, which breaks my pagination,sorting and the whole dataProvider rendering. After the ajax update the dataProvider is loaded via renderPartial and ajax and does not work any more. When I hover over one of the page links I can see that it points to the ajax target action and not the admin action anymore. Is there a way to force the dataProvider to point to specific url? I was unable to apply the above solution

Thanks,

bettor