responsive/fluid jQGrid with Twitter Bootstrap

css, html, jqgrid, jquery, twitter-bootstrap

Solution

I found this solution, it works fine on my apps.

Wrap you table in a div :

<div id="jqGrid_container">
    <table id="jqList"></table>
    <div id="jqPager"></div>
</div>

And in your javascript code :

$(window).bind('resize', function() {
    var width = $('#jqGrid_container').width();
    $('#jqList').setGridWidth(width);
});

or if you don't need to resize, just :

$( document ).ready(function() {
    var width = $('#jqGrid_container').width();
    $('#jqList').setGridWidth(width);
});

I think you also need to put in your jqgrid options : autowidth: true, shrinkToFit: true,

Problem

I started creating application uses jQgrid in many places. Now the customer wanted to use Twitter Bootstrap so they can view the site nicely in iPad. We have atmost done everything, except jQGrid plugin. It uses a `px width` for defining width of the grid and `column width`. ``` jQuery("#list2").jqGrid({ url:'server.php?q=2', datatype: "json", colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'id',index:'id', width:55}, {name:'invdate',index:'invdate', width:90}, {name:'name',index:'name asc, invdate', width:100}, {name:'amount',index:'amount', width:80, align:"right"}, {name:'tax',index:'tax', width:80, align:"right"}, {name:'total',index:'total', width:80,align:"right"}, {name:'note',index:'note', width:150, sortable:false} ], rowNum:10, rowList:[10,20,30], pager: '#pager2', sortname: 'id', viewrecords: true, sortorder: "desc", caption:"JSON Example" }); jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false}); ``` I have no idea about How to deal this responsive issue with jQGrid. Alternatively I can replace jQGrid with DataTable Plugin for responsiveness. But we use jQgrid in many place and functions very well, we dont want to break existing functionality. Any idea/suggestions to use jQgrid as responsiveness/fluid layout support?

Original source