Make JqGrid width fluid [duplicate]

Question

This question already has an answer here:

• Way to make jqGrid responsive on web browsers 4 answers

Corrected Code :

<script>
    var $grid = $("#list2");
    emptyMsgDiv = $("<div><span style='color:red; text-align:center;font-size:18px;display:block;'>No Workorder Found</span></div>");
    jQuery("#list2").jqGrid({
        url:'server.php',
        datatype: "json",
        mtype: 'POST',
        colNames:['WO#','Status','Customer Name','Salesman', 'Created Date', 'WO Total', 'Notes', 'Edit'],  
        colModel:[ 
               {name:'id',index:'id', align:"center"}, 
               {name:'status1',index:'status1', align:"center", width:100}, 
               {name:'status2',index:'status2', align:"center", width:50}, 
               {name:'status3',index:'status3', align:"center"}, 
               {name:'result',index:'result', align:"center", sortable:false}          
        ],
        rowNum:10,
        rowList:[10,20,30],
        pager: '#pager2',
        sortname: 'Invoice.id',
        viewrecords: true,
        height:'100%',
        autowidth:true,
        sortorder: "desc",
        height: '100%',
        loadComplete: function() {
             var ts = this;
             if (ts.p.reccount === 0) {
                 $(this).hide();
                 emptyMsgDiv.show();
             } else {
                 $(this).show();
                 emptyMsgDiv.hide();
             }
        }
    });
    emptyMsgDiv.insertAfter($grid.parent());
    </script>

Here is the code I have for my JqGrid :

<script>
var $grid = $("#list2");
emptyMsgDiv = $("<div><span style='color:red; text-align:center;font-size:18px;display:block;'>No Workorder Found</span></div>");
jQuery("#list2").jqGrid({
    url:'server.php',
    datatype: "json",
    mtype: 'POST',
    colNames:['WO#','Status','Customer Name','Salesman', 'Created Date', 'WO Total', 'Notes', 'Edit'],  
    colModel:[ 
           {name:'id',index:'id', align:"center"}, 
           {name:'status1',index:'status1', align:"center"}, 
           {name:'status2',index:'status2', align:"center"}, 
           {name:'status3',index:'status3', align:"center"}, 
           {name:'result',index:'result', align:"center", sortable:false}          
    ],
    rowNum:10,
    rowList:[10,20,30],
    pager: '#pager2',
    sortname: 'Invoice.id',
    viewrecords: true,
    height:'100%',
    sortorder: "desc",
    height: '100%',
    loadComplete: function() {
         var ts = this;
         if (ts.p.reccount === 0) {
             $(this).hide();
             emptyMsgDiv.show();
         } else {
             $(this).show();
             emptyMsgDiv.hide();
         }
    }
});
emptyMsgDiv.insertAfter($grid.parent());
</script>

I am trying to make the colModel fluid width for the page, I am able to change the width manually for each of the columns as in the following tidbit :

{name:'status1',index:'status1', align:"center", width:50}

However, I can not define percentages, or seem to figure out how to do fluid width. Does anyone have any ideas?

Answer 1

First of all you should add autowidth: true option, which sets the initial width of the grid to the width of outer container on the HTML page. It will force resizing of all columns proportional of the value of width property in colModel. Because you don't specify any width property then the default 150 value will be used. In case of resizing it means just that you specified the same width for all columns. If you need to hold some fixed width for some columns, for example for the column which have formatter: "actions" (which displays two editing icons in the grid), then you can add fixed: true to the column.

To resize the grid every time after the web browser window or the outer div will be resized you can use the following code

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

(see the old answer).

Additional features exist in free jqGrid, the fork of jqGrid which I develop starting with renaming jqGrid to Guriddo jqGrid JS (see the post) and making it commercial. The demo: http://jsfiddle.net/OlegKi/andm1299/19/ uses <div class="container"> as the outer div of jqGrid and to add classes: "hidden-xs", labelClasses: "hidden-xs" bootstrap classes (see the documentation) to less important column ComboDuration of the demo. As the result, the column will be made automatically hidden/visible on resizing of the grid. It could be very helpful to produce good results on mobile devices with low pixel resolution.

Answer 2

you can make it fill the page using the following :

autowidth: true,

I also set minimum custom widths for a few of the columns as listed above