Yii 1.1: escrollablegridview

Allows fixed headers and footers and scrolling table rows for large data in grid view
11 followers

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

Total 3 comments

#16939 report it
Daniel at 2014/04/14 08:08pm
escrollable + yiistrap

I use yiistrap in my project, how could I implement escrollable gridview using yiistrap? I tried by changing the inheritance from CGridView to TbGridView, but not working...

#9957 report it
Zugluk at 2012/09/25 05:39am
big database

When we have very big database, such as some millions of records, is there a way to not load all database but only by group of records which are shown depending with the position of the scroll ?

jqgrid allows that with the options : scroll 1, rowNum XXX

Where XXX is the maximum number of row to load in same time

#9400 report it
gilles at 2012/08/08 06:07pm
Fixed Columns ?

Hi,

in first thank for this good extension :) very simple to use ...

I have a big gridview with lot of field, so i use a vertical scrollbar, but the fixed header don't follow the fixed column (width).

do you have a solution ?

Leave a comment

Please to leave your comment.

Create extension