8

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

Avoid
  • 343
  • 2
  • 9
  • 20

4 Answers4

23

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.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • the pager element is not responsive in this demo, i think we need to add reference to that. – Harshit Oct 12 '15 at 05:50
  • @Harshit: It's depend on how exactly you define "responsive". Additionally the behavior of the pager and the navigator bar is changed in more resent versions (see [the wiki](https://github.com/free-jqgrid/jqGrid/wiki/Redesign-of-the-structure-of-Navigator-Bar-of-the-pagers)). [Free jqGrid](https://github.com/free-jqgrid/jqGrid) have mush better behavior. See [the demo](http://jsfiddle.net/OlegKi/ejpn9/56/) and [this one](http://jsfiddle.net/OlegKi/andm1299/7/). the last demo uses `"hidden-xs"` class of Bootstrap for the last column and the column will be hide/show depend on the width of grid. – Oleg Oct 12 '15 at 07:12
  • I had this exact same problem and this solution worked perfectly. Thanks! – Michael Sobczak Feb 03 '16 at 21:51
  • @MichaelSobczak: You are welcome! [Another demo](http://jsfiddle.net/OlegKi/andm1299/26/) shows other possibilities of [free jqGrid](https://github.com/free-jqgrid/jqGrid) fork which I develop: the properties `classes: "hidden-xs", labelClasses: "hidden-xs"` from the last column the demo uses Bootrsrap class, which hide the column if the resolution of the page will be low. – Oleg Feb 04 '16 at 13:59
2

I wrote a css you can use to make 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;
}
Guy L.
  • 153
  • 1
  • 9
0

Add to method below to beforeEvent of 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', '');
}
angelcool.net
  • 2,505
  • 1
  • 24
  • 26
hardev
  • 1
-1

I tried the following code but observed that it did not provide any scroller for responsive devices. Hence decided to customise 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 making JQ Grid properly responsive

/**** JQ grid responsiveness ***/

#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 the custom stylesheet & get set to view the JQGrid fully responsive!

Any other suggestions will be most welcomed. Try it out & Enjoy!

Tanvi
  • 9
  • 4
  • Did you see the fiddle attached to the accepted answer? [This fiddle](http://jsfiddle.net/ejpn9/4/) – Avoid Nov 02 '16 at 17:58
  • The columns are not visible in the mobile device and there is no scroll bar for responsive devices, Could you please provide a proper script for the scroll? I think script code will work instead of css. – Md Aslam Nov 11 '19 at 11:29