Skip to content

Way to make jqGrid responsive on web browsers


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.

Posted in Javascript, jquery. Tagged with , , .