A way to make jqGrid respond to web browsers

Question

I am new to jqGrid and I need this grid to be resized when the web browser window is resized. I applied autowidth : true; , shrinkToFit: true; in the grid, but that doesn't work.

Setting CSS width : 100% is the only implementation, but this is not good with jqGrid
which sets width to px explicitly on many of its internal structures.

what would be the perfect way to solve it?

Answer 1

jqGrid uses a fixed width value for many internal structures (divs, tables, etc.). Therefore, you cannot just set CSS width : 100% . However, there is another way to do the same. You can register a resize event handler on a window object and explicitly call setGridWidth . This method adjusts all jqGrid internal structures to a new width. So that would be a clean method.

If you use autowidth: true , then jqGrid sets the jqGrid width for its width only once. Inside the $(window).resize we can get the new (current) width of the parent element and reset the grid width . The corresponding code will be as follows

 $(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 builds some dives over the main <table> element. $("#list").closest(".ui-jqgrid") gives as an external div, which includes all the grid elements.

The demo version of the modified script demonstrates the code in real time.

Answer 2

I wrote a css that you can use to make the grid responsive: https://github.com/guylando/Responsive-jqGrid/blob/master/Responsive-jqGrid.css

Its faster than using javascript in my opinion.

Here is the css code:

 .ui-jqgrid .ui-jqgrid-toppager .ui-pager-control, .ui-jqgrid .ui-jqgrid-pager .ui-pager-control { height: auto; } .ui-jqgrid .ui-pager-control td[id$="_toppager_center"], .ui-jqgrid .ui-pager-control td[id$="pager_center"] { width: auto !important; white-space: normal !important; height: auto; } .ui-jqgrid .ui-pager-control td[id$="_toppager_left"], .ui-jqgrid .ui-pager-control td[id$="pager_left"] { width: auto !important; white-space: normal !important; height: auto; } .ui-jqgrid .ui-pager-control td[id$="_toppager_right"], .ui-jqgrid .ui-pager-control td[id$="pager_right"] { width: auto !important; white-space: normal !important; height: auto; } .ui-jqgrid .ui-jqgrid-bdiv, .ui-jqgrid .ui-jqgrid-view.table-responsive, .ui-jqgrid, .ui-jqgrid-pager, .ui-jqgrid-toppager, .ui-jqgrid-hdiv { width: auto !important; } .ui-jqgrid .ui-pager-control td[id$="_toppager_left"], .ui-jqgrid .ui-pager-control td[id$="pager_left"], .ui-jqgrid .ui-pager-control td[id$="_toppager_center"], .ui-jqgrid .ui-pager-control td[id$="pager_center"] { overflow-x: auto; overflow-y: hidden; } 

Answer 3

Add to the method below before beforevent jqgrid ......

function

 function responsive_jqgrid(jqgrid) { jqgrid.find('.ui-jqgrid').addClass('clear-margin span12').css('width', ''); jqgrid.find('.ui-jqgrid-view').addClass('clear-margin span12').css('width', ''); jqgrid.find('.ui-jqgrid-view > div').eq(1).addClass('clear-margin span12').css('width', '').css('min-height', '0'); jqgrid.find('.ui-jqgrid-view > div').eq(2).addClass('clear-margin span12').css('width', '').css('min-height', '0'); jqgrid.find('.ui-jqgrid-sdiv').addClass('clear-margin span12').css('width', ''); jqgrid.find('.ui-jqgrid-pager').addClass('clear-margin span12').css('width', ''); } 

Answer 4

I tried the following code, but noticed that it does not provide a scroller for sensitive devices. Therefore, it was decided to configure the JQGRID stylesheet:

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

Please find my hack for JQ Grid to work properly.

/ **** Grid reactivity JQ *** /

 #gview_jqgrid, div#myPager {width:100% !important;height:100% !important;} .ui-jqgrid-hdiv, .ui-jqgrid-htable {width:100% !important;height:100% !important;} .ui-jqgrid-bdiv, #jqgrid {width:100% !important;height:100% !important;} .ui-jqgrid .ui-jqgrid-hbox {padding-right:0 !important;} .ui-jqgrid tr.jqgrow td { white-space: pre-wrap !important;} div#gbox_jqgrid { width: 100% !important; overflow-x: scroll; margin-bottom: 80px !important;} 

Add this to your custom stylesheet and install a fully responsive JQGrid to view!

Any other suggestions would be welcome. Try and enjoy!