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?

Rosetta

Answer 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,

Ornate

Answer 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?

Devaluate

How about this template with jQGrid plugin? wrapbootstrap.com/theme/ace-responsive-admin-template-WB0B30DGR – Clean

Answer 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 :)

Electromagnetic

Answer 4

Yes you can make it responsive with a very simple method.

Just open your CSS and give width in % .

Example:

ui-grid{ width:100% !important; }

Then change table body accordingly.

Cyn

Answer 5

This works well for bootstrap responsive

jQuery("#your-list-id").setGridWidth($('.your-reference-element').width()-10, true);

will use "your-reference-element" width to resize the grid

Peninsula

Answer 6

Customised CSS

I tried the following code but observed that it did not provide any scroller for responsive devices. Hence decided to customise the JQGRID stylesheet:

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

Please find my hack for making JQ Grid properly responsive

/**** JQ grid responsiveness ***/

#gview_jqgrid, div#myPager {width:100% !important;height:100% !important;}
.ui-jqgrid-hdiv, .ui-jqgrid-htable {width:100% !important;height:100% !important;}
.ui-jqgrid-bdiv, #jqgrid {width:100% !important;height:100% !important;}
.ui-jqgrid .ui-jqgrid-hbox {padding-right:0 !important;}
.ui-jqgrid tr.jqgrow td { white-space: pre-wrap !important;}
div#gbox_jqgrid { width: 100% !important; overflow-x: scroll; margin-bottom: 80px !important;}

Add this to the custom stylesheet & get set to view the JQGrid fully responsive!

Any other suggestions will be most welcomed. Try it out & Enjoy!

Maggi

Answer 7

Next code makes all jqgrid tables on page responsive:

$(window).on("resize", function() {
    $('.ui-jqgrid').each(function(){
        $('#'+$(this).attr("id").substring(5)).setGridWidth($(this).parent().width());
    });
});

Bukharin

Answer 8

New version of jqGrid 5.0 has native support of Bootstrap.

As of version 5.0 Guriddo jqGrid can be adapted easy with any CSS framework. We have developed a Bootstrap port. To use the feature you will need only to include the appropriate CSS

<link rel="stylesheet" type="text/css" media="screen" href="path_to_css_files/ui.jqgrid-bootstrap.css" />

file and tell jqGrid to use Bootstrap – with the option:

$("#grid").jqGrid( {
    ...
    styleUI : "Bootstrap",
    ...
 });

Except Column Chooser and re sizing the grid with a mouse we support all the jqGrid existing features.

Demo

Source

Flavine