dynamic grid height using master/detail

Questionsdynamic grid height using master/detail
Harry asked 9 years ago

Hi

I have a master detail grid which I wish to be able to resize in height according to the browser window height so that the master grid is 66% of the height of the window and the detail view is 33%.

Ive used

$opt["height"] = "400";
$grid->set_options($opt);

which works but

$opt["height"] = "50%";
$grid->set_options($opt);

seems to be ignored and displays as if it were

$opt["height"] = "100%";
$grid->set_options($opt);

Is this a limitation of a master/detail arrangement or is there another way to have the 2 grids resizing in height dynamically?

4 Answers
Abu Ghufran answered 9 years ago

You can have custom JS code to set height of grid.
http://pastebin.com/4uD54XtH

Set your grid ids and height offset wrt window height.

Harry answered 9 years ago

Thank you but could you please be bit more specific, I've tried:

jQuery(document).ready(function(){
jQuery(window).bind("resize", function () {

var height_master = "66%";
var height_detail = "33%";

// adjust height on resize
jQuery("#list1").jqGrid('setGridHeight',jQuery(window).innerHeight(height_master)-120);
jQuery("#list2").jqGrid('setGridHeight',jQuery(window).innerHeight(height_detail)-120);

}).trigger("resize");
});

Abu Ghufran answered 9 years ago

Hello,

jQuery(window).innerHeight() is the full height of window.

To set 66% of full height, you need to set something like:
jQuery("#list1").jqGrid('setGridHeight',jQuery(window).innerHeight()*.66 -120);

And same for 33%.
jQuery("#list2").jqGrid('setGridHeight',jQuery(window).innerHeight()*.33 -120);

-120 is adjustment offset. You can set is wrt your layout need.

Harry answered 9 years ago

Works, thank you.

Your Answer

15 + 10 =

Login with your Social Id:

OR, enter

Attach code here and paste link in question.
Attach screenshot here and paste link in question.



How useful was this discussion?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate it.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?