Yii Framework Forum: Scrollable Gridview - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Scrollable Gridview looks simple... Rate Topic: -----

#1 User is offline   Zugluk 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 205
  • Joined: 08-August 12

Posted 10 October 2012 - 09:39 AM

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.yiiframew...llablegridview/ 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
0

#2 User is offline   bennouna 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,165
  • Joined: 05-January 12
  • Location:Morocco

Posted 10 October 2012 - 09:52 AM

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

#3 User is offline   Zugluk 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 205
  • Joined: 08-August 12

Posted 10 October 2012 - 10:04 AM

View Postbennouna, on 10 October 2012 - 09:52 AM, said:

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 ?
0

#4 User is offline   Reza m 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 148
  • Joined: 07-March 12

Posted 10 October 2012 - 10:55 AM

take a look at this
http://yii-booster.c...ended-grid.html

I didn't try it myself yet
0

#5 User is offline   Zugluk 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 205
  • Joined: 08-August 12

Posted 10 October 2012 - 11:10 AM

View PostReza m, on 10 October 2012 - 10:55 AM, said:

take a look at this
http://yii-booster.c...ended-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
0

#6 User is offline   bennouna 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,165
  • Joined: 05-January 12
  • Location:Morocco

Posted 10 October 2012 - 11:22 AM

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?
0

#7 User is offline   Zugluk 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 205
  • Joined: 08-August 12

Posted 10 October 2012 - 11:26 AM

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

#8 User is offline   bennouna 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,165
  • Joined: 05-January 12
  • Location:Morocco

Posted 10 October 2012 - 12:51 PM

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>

0

#9 User is offline   bennouna 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,165
  • Joined: 05-January 12
  • Location:Morocco

Posted 10 October 2012 - 12:51 PM

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

#10 User is offline   Reza m 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 148
  • Joined: 07-March 12

Posted 10 October 2012 - 04:13 PM

View PostZugluk, on 10 October 2012 - 11:10 AM, said:

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


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.
0

#11 User is offline   Zugluk 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 205
  • Joined: 08-August 12

Posted 12 October 2012 - 04:15 AM

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...
0

#12 User is offline   Trần Minh Quang 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 9
  • Joined: 13-December 12
  • Location:Tan Phu district, Dong Nai province, Viet Nam

Posted 13 December 2012 - 09:28 PM

View PostZugluk, on 12 October 2012 - 04:15 AM, said:

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!
Code is poetry
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users