Scrolling In Cgridview

In my situation I need my CGridView to be able to scroll up/down. I know that we have pagination but pagination is very static. We can only see in the statically divided pages. For example, I have 52 rows, and I page size is 10, so I can see row 1-10, 11-20, 21-30, 31-40, 41-50 and 51-52. What I need is capability to scroll down. I want to be able to see 1-10, 2-11, 3-12, and so on.

My current implementation is using scrollbar (overflow: auto) in tbody of a table. Yes, I use html table rather than CGridVIew. However, it is hard to synchronize the table width. They look ugly. Even, it is hard to implement pagination.

Can anybody suggest on how to add the scrolling capability in CGridView. I want the pagination is still there but I need to add the offset(?) into it.

Thank you in advance.


Use js Iinfinite scroll there are a few extensions that use it

Thank you for your prompt response. However, what I need is the height of the CGridView is fixed. Using infinite scroll we would add the height of the CGridView.

I read that offset and pagination cannot be together. We have to set the pagination false if we want to use offset. Is that true?

Unfortunately, I need to have both…

Im confused on what your trying to accomplish. are you trying to do something like this? Table demo

or are you tying to have it changes pages automatically when you scroll to the bottom?

I think he need a gridview as per link.I am also interested in code,how you have make gridview shown in link.Can you please tell me,how you have achieve it?

Exactly. This is what I need. How could I do that? Is there any yii extension that implements those capabilities?

Thank you for your response.

Which one are you tying to do? The first or the second?

here is a yii ext to make scrollable tables…never tried it. scrollable table

One that is in the link TableDemo. esscollablegridview is great but I could not implement it together with yiistrap ;( Additionally, it will load all data, if I have hundreds of rows than it will be very slow. What I need is probably escrollablegridview with pagination. Hence, I can paginate every say 20 rows but shown on 5 rows. I can scroll in between 1-20 since only 5 rows is shown. It is okay if not exactly 5 rows since we use pixel and 1 row can be multiline. I hope you get my idea.

any help?

Moved from Tips, Snippets and Tutorials to General Discussion for Yii 1.1.x.

I have looked at the demo pointed to here.I have been trying to achieve this type of sorting, where you click on the column header and then have the items auto sorted.

How can i achieve this?

If you want to achieve what you want, try to use infinityscroll + CSS to fix the size of your grid and add scroll attribute to your rule. JQgrid as a built-in option to do it, but not yii ;)

I personnally use escrolltable addons, and I let the user choose the number of lines he wants in the grid =)

the yii widget YiinfiniteScroller can be used separtly or in combination with any grid view

sample code below

$this->widget(‘booster.widgets.TbExtendedGridView’,array( //orCgridview also works

    'type' => 'striped bordered condensed',



    'rowHtmlOptionsExpression' => 'array("class"=>post)', //row id new tables are appended using this id

    'template'=>"{items}\n{pager}",  //need as we are using custom footer (default pagination appears in tfoot


    'columns'=>array(            //table columns




        'pager'=> array(


            'contentSelector' => 'table.items tbody',  

            'itemSelector' => '',  //appending selctor

            //'pages' =>  $model->search()->pagination