Scrollable Gridview

Hi everybody,

Is there any way to make a fixed height gridview scrollable when you display tons of row ??

First I used this extension http://www.yiiframework.com/extension/escrollablegridview/ it works well but css is managed by the javascript… impossible to handle it correctly I have many problems of width between columns and header… they are all the time shifted… I tried many things to correct that but I finally gave up.

Then I tried simply to put my gridview in a div with a fixed height and “overflow-y:auto” css style… but here again it doesn’t work… div is well 500px big… but table goes over and no scroll appears…

So is there other way to do it ? or have you an Idea ??

I searched a lot on yii website but I didn’t find anything interesting except the extension I talked about. Almost all topics I found were about infinite scroll (like on twitter) but I want a simple one.

thanks

Normally the overflow-y is enough. Can you share your layout and view?

sure :

view for cgridview widget:


<div class="output">

<?php

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

	'id'=>'element-grid',

	'dataProvider'=>$model->search(),

	'filter'=>$model,

  'selectableRows' => 2,

  'columns'=>array(

    /*array(

      'class' => 'CCheckBoxColumn',

      'id'=>'selection',

    ),

    'id',*/

    'element',

    'description',

    ),

    'htmlOptions'=>array(

      'style'=>'overflow-y:scroll;height:500px;'),

  ));

?>

</div>

layout :


<div id="content" class="span-16">

		<?php echo $content; ?>

	</div><!-- content -->

  

</div>

<?php $this->endContent(); ?>

for the interesting part…

Shouldn’t I apply the overflow on tbody of the gridview instead ?

take a look at this

http://yii-booster.clevertech.biz/extended-grid.html

I didn’t try it myself yet

Your link looks interesting but what is the connection with my topic ? it doesn’t suggest a way to get a gridview scrollable

I can’t test it right now but have you tried moving the overflow-y and the height to your container div instead of the widget?

Yep, I tried many things, every way, but I don’t get it work :(

I’ve just tested and it works on my Safari (and I bet on FF and Chrome as well):


<div class="output" style="height: 500px; overflow-y: auto">

<?php

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

        …

  ));

?>

</div>

Unless you have some other styling applied to your "output" CSS class. Can you post a screenshot?

if you just want to make your gridview scrollable it’s a simple task with css but fixing the header has some issue so I thought it’s fixed header gridview may be usefull for you.

Thanks all for reply, it finally works, I had to set a width, if not the div left screen to go on right side far away…

You can share your code?

Help me ?

Thank you!