Friday, May 17, 2024
 Popular · Latest · Hot · Upcoming
23
rated 0 times [  29] [ 6]  / answers: 1 / hits: 25198  / 10 Years ago, wed, july 30, 2014, 12:00:00

I am new in jqGrid and I need that grid will be resized on resizing the window of the web browser. I have applied autowidth : true; , shrinkToFit: true; in grid but that is not working.



Setting of CSS width : 100% is the only one implementation, but it's not good in case of jqGrid

which set width in px explicitly on many its internal structures.



what would be the perfect way to solve it ??


More From » jquery

 Answers
17

jqGrid uses fixed width value on many internal structures (divs, tables and so on). So one can't just set CSS width : 100%. Nevertheless there are another way to do the same. One can register resize event handler on window object and to call setGridWidth explicitly. The method adjust all internals structures of jqGrid to new width. So it would be clean method.



If you use autowidth: true then jqGrid set the width of jqGrid to the width of it's parent only once. Inside of $(window).resize handler we can get new (the current) width of the parent and reset the value of grid width. The corresponding code will be the following





$(window).on(resize, function () {
var $grid = $(#list),
newWidth = $grid.closest(.ui-jqgrid).parent().width();
$grid.jqGrid(setGridWidth, newWidth, true);
});


I used $(#list).closest(.ui-jqgrid) instead of $(#list) because jqGrid build some dives over the main <table> element. $(#list).closest(.ui-jqgrid) gives as the outer div which include all the elements of the grid.



The modified fiddle demo demonstrates the code live.


[#69996] Sunday, July 27, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
jackie

Total Points: 442
Total Questions: 107
Total Answers: 94

Location: Honduras
Member since Sun, Dec 26, 2021
2 Years ago
jackie questions
Sat, Sep 18, 21, 00:00, 3 Years ago
Wed, Jul 14, 21, 00:00, 3 Years ago
;