1. Requirements
2. Usage
3. Resources

Sometimes when dealing with large datasets, it is desirable to have all data on one page instead of paginated. In this case, the header and footer (heading and summary) would ideally stay fixed while the rows themselves still scroll. This is a quick and easy way to make these things possible.

I have based this off of the jquery scrollable table plugin found here:

http://www.farinspace.com/jquery-scrollable-table-plugin/

There is a working demo available there if you wish to see how it works.

Notes!

Ajax updating of the table is disabled for the time being. I couldn't figure out how to gracefully rerun the javascript to make the table scrollable after the ajax update, so I just stopped it.

This works on class and not id (because CGridView doesn't set ids on the table that I could see), so if you want to use this and a regular gridview on the same page, make sure to change the classname of the EScrollableGridView!

Requirements ¶

Yii 1.1 or above

Usage ¶

Remember to import this in your main config file like so:

// autoloading model and component classes
	'import'=>array(
		'application.models.*',
		'application.components.*',
		...
		'application.extensions.EScrollableGridView.*',
	),

Then you can very easily modify your existing files to work with this extension as you can see below:

//This is what your current auto-generated code looks like
$this->widget('zii.widgets.grid.CGridView', array(
	'id'=>'something',
	'dataProvider'=>$model->search(),
	...
));


//This is all you have to change to make it scrollable
$this->widget('EScrollableGridView', array(
	'id'=>'something',
	//The height you want the scrollable row area to be, defaults to 100,
	//Optional or you can leave out completely if default works for you
	'height' => '100', 
	//The width you want the scrollable row area to be, defaults to the,
	//natural width of the table. You can leave out completely if default
	//works for you
	'width' => '400',
	//Whether header should flush with scroll bar. This is a matter of 
	//preferenece. You can leave out completely if default works for you
	'flush' => false,
	//recommended but not necessary, the following change puts all data
	//on one page for you. This works with or without this extension, I
	//am just putting it here for easy reference
	'dataProvider'=>$model->search(
		array(
			'pagination' => false,
		)
	), 
	...
));

Resources ¶

• jQuery plugin page with working demo
• Join the discussion