Way to make jqGrid responsive on web browsers

Question

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;

Answer 1

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

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.

0 讨论(0)

查看其它4个回答

发布评论:

提交评论

---

•  加载中...

验证码

 看不清?

提交回复

热议问题