JqGrid Width resizing Issue with Browser resize

Question

Can I set JqGrid width in a way that it automatically resizes with browser width.

Have tried using this.

  autowidth:true,
  .....
  $(window).bind('resize', function () {
        $("#table").setGridWidth($("#table").width());
    }).trigger('resize');

Resizing isnt working as expected, When I resize the browser I expect grid to resize accordingly to that of browser width.

UPDATE:

 $(function () {
        $grid = $("#table");
        $grid.jqGrid({
            url: '../../Services/OrderService.asmx/getGlbOrders',
            datatype: 'json',
            mtype: 'POST',
            ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
            serializeGridData: function (postData) {

                if (postData.searchField === undefined) postData.searchField = null;
                if (postData.searchString === undefined) postData.searchString = null;
                if (postData.searchOper === undefined) postData.searchOper = null;
                //if (postData.filters === undefined) postData.filters = null;                   
                return JSON.stringify(postData);
            },

            jsonReader: {
                root: "d.rows",
                page: "d.page",
                total: "d.total",
                records: "d.records",
                id: "d.names"
            },
            colModel: [
                     { name: 'select', label: 'select', width: 50,
                         formatter: function radio(cellValue, option) {
                             return '<input type="radio" name="radio_' + option.gid + '"  value=' + cellValue + ' />';
                         }
                     },
                     { name: 'code', label: 'Order ID' },
                     { name: 'qty', label: 'Quantity' },
                     { name: 'qtyr', label: 'Remaining Qty'},
                     { name: 'uts', label: 'Units' },
                     { name: 'status', label: 'Status' },
                ],


            rowNum: 10,
            rowList: [10, 20, 300],
            sortname: 'name',
            sortorder: "asc",
            pager: "#pager",
            viewrecords: true,
            gridview: true,
            rownumbers: true,
            height: 250,
            autowidth: true,
            caption: 'Global Order List'
        }).jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: false });

    })


     $(window).bind('resize', function () {
         $("#table").setGridWidth($("#table").width());
     }).trigger('resize');

I'm assuming this isn't working for you. What behavior and/or error are you seeing? — David Hoerster, Jan 12 '12 at 11:53
@David:Yesitisnt working as expected, When I resize the browser I expect grid to resize accordingly to that of browser width. — Suave Nti, Jan 12 '12 at 11:59
It seems duplicate from [the question](http://stackoverflow.com/q/875225/315935). — Oleg, Jan 12 '12 at 12:35
Hi Oleg, have gone through that question but the solution suggested isnt working for me(might be working for some other old versions of jqgrid but not for the latest one). — Suave Nti, Jan 12 '12 at 12:54
I'm using very similar code to yours and I'm using version 4.0 of jqGrid (not the latest, but not that far behind). Where/when are you firing this code? Mine is executing when the page initially loads. — David Hoerster, Jan 12 '12 at 13:38
@DavidHoerster : Same here David am firing this on Page execution. Any other suggestions? — Suave Nti, Jan 12 '12 at 13:42
My `$(window).bind` fires after my grid has been initialized. I'm assuming you're doing the same (makes sense). Otherwise I can't think of other suggestions. Do you see any errors in FireBug or the IE F12 tools when your scripts run? — David Hoerster, Jan 12 '12 at 14:12
@david, Kindly check if the jqgrid inititation is same as yours, Have checked in firebug there arent any errors, But when I change my screen resolution to 1024X768 it resizes perfectly. — Suave Nti, Jan 12 '12 at 14:16
It's pretty close to mine. 2 things that are slightly different: 1) I was mistaken...I set up my `window.bind` before I initialize my grid (as my grid doesn't display right away); 2) my resize function is based on my grid's outer container (`#content`, which is a DIV that contains my grid's ) and not my grid itself (#table in your example). I'm not sure that would make a difference or not, but those are the differences that I see. My screen resolution doesn't seem to make a difference, either. Sorry I can't be more help. — David Hoerster, Jan 12 '12 at 14:38
Its answered here http://stackoverflow.com/questions/1311728/resize-the-jqgrid-width-while-browser-resizing — Babak Ravandi, Apr 02 '13 at 04:41

score 0 · Answer 1 · answered Oct 09 '13 at 08:27

change your code from:

$(function () {
        $grid = $("#table");
        $grid.jqGrid({
            // etc..
        }).jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: false });

})

$(window).bind('resize', function () {
    $("#table").setGridWidth($("#table").width());
}).trigger('resize');

to:

$(function () {
        $grid = $("#table");
        $grid.jqGrid({
            // etc..
        }).jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: false });

});

$(window).bind('resize', function () {
    $("#table").setGridWidth($("#table").width());
}).trigger('resize');

You have forgotten a semicolon after the end of your jqGrid function. Then the code that comes after your function is ignored.

JqGrid Width resizing Issue with Browser resize

1 Answers1