responsive/fluid jQGrid with Twitter Bootstrap

Question

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?

Solution 1

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,

Solution 2

I suggest looking at this answer for some ideas on how to make the grid fluid using the setGridWidth method. In addition you should look the following grid options:

• autowidth

When set to true, the grid width is recalculated automatically to the width of the parent element. This is done only initially when the grid is created. In order to resize the grid when the parent element changes width you should apply custom code and use the setGridWidth method for this purpose

• shrinkToFit

This option, if set, defines how the the width of the columns of the grid should be re-calculated, taking into consideration the width of the grid. If this value is true, and the width of the columns is also set, then every column is scaled in proportion to its width.

The shrinkToFit option is set by default, but you will need to explicitly set autowidth.

Does that help?

Solution 3

You can add this piece of code :

jQuery("#grid").jqGrid({
......
 beforeRequest: function() {
                    responsive_jqgrid($("#divWhereYourgridIsDisplayed"));
                },
.......
});

And after this, you should add:

 function responsive_jqgrid(jqgrid) {
                jqgrid.find('.ui-jqgrid').addClass('clear-margin span12').css('width', '');
                jqgrid.find('.ui-jqgrid-view').addClass('clear-margin span12').css('width', '');
                jqgrid.find('.ui-jqgrid-view > div').eq(1).addClass('clear-margin span12').css('width', '').css('min-height', '0');
                jqgrid.find('.ui-jqgrid-view > div').eq(2).addClass('clear-margin span12').css('width', '').css('min-height', '0');
                jqgrid.find('.ui-jqgrid-sdiv').addClass('clear-margin span12').css('width', '');
                jqgrid.find('.ui-jqgrid-pager').addClass('clear-margin span12').css('width', '');
            }

Hope this works :)

Comments

[Murali Murugesan]

How about this template with jQGrid plugin? wrapbootstrap.com/theme/ace-responsive-admin-template-WB0B30‌​DGR