About design and nearby

jqGrid: How to Make it Responsive (with Twitter Bootstrap)

Posted: March 30th, 2015 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , , | 5 Comments »

I started developing application with jQgrid (an Ajax-enabled JavaScript control for representing and manipulating tabular data) and Twitter Bootstrap grid system. This jQGrid plugin uses a px width for defining width of the grid and column width. And my design should support responsibility – as usual. And that’s the tricky part ;)

jq Grid

Solution #1

The HTML: I wrapped my grid with div element with class ‘jqGrid’:

  1. <div id="grid" class="jqGrid">
  2.     <table id="list"><tr><td></td></tr></table>
  3.     <div id="pager"></div>
  4. </div>


Javascript:
I set beforeRequest event and re-write styles below:

  1. jQuery("#list").jqGrid({
  2.                 datatype: 'xmlstring',
  3.                 datastr: mystr,
  4.                 colNames: ['Inv No', 'Date', 'Amount', 'Tax', 'Total', 'Notes'],
  5.                 colModel: [
  6.                   { name: 'invid', index: 'invid', width: 55, sorttype: 'int' },
  7.                   { name: 'invdate', index: 'invdate', width: 90, sorttype: 'date', datefmt: 'Y-m-d' },
  8.                   { name: 'amount', index: 'amount', width: 80, align: 'right', sorttype: 'float' },
  9.                   { name: 'tax', index: 'tax', width: 80, align: 'right', sorttype: 'float' },
  10.                   { name: 'total', index: 'total', width: 80, align: 'right', sorttype: 'float' },
  11.                   { name: 'note', index: 'note', width: 150, sortable: false }],
  12.                 rowNum: 10,
  13.                 viewrecords: true,
  14.                 caption: 'My first grid',
  15.                 beforeRequest: function () {
  16.                     responsive_jqgrid($(".jqGrid"));
  17.                 }
  18.             });
  19.             function responsive_jqgrid(jqgrid) {
  20.                 jqgrid.find('.ui-jqgrid').addClass('clear-margin span12').css('width', '');
  21.                 jqgrid.find('.ui-jqgrid-view').addClass('clear-margin span12').css('width', '');
  22.                 jqgrid.find('.ui-jqgrid-view > div').eq(1).addClass('clear-margin span12').css('width', '').css('min-height', '0');
  23.                 jqgrid.find('.ui-jqgrid-view > div').eq(2).addClass('clear-margin span12').css('width', '').css('min-height', '0');
  24.                 jqgrid.find('.ui-jqgrid-sdiv').addClass('clear-margin span12').css('width', '');
  25.                 jqgrid.find('.ui-jqgrid-pager').addClass('clear-margin span12').css('width', '');
  26.             }

*Disadvantage of the solution above is the one works in case we have ajax request only. Also sometimes it’s not the best solution to count the width before the window is loaded.

Check standalone example: Responsive jqGrid-1 (with Twitter Bootstrap) in action >>

Solution #2
(I like this one rather better)

The HTML is the same as above.

Javascript:
You can use 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.

  1. jQuery("#list").jqGrid({
  2.                 datatype: 'xmlstring',
  3.                 datastr: mystr,
  4.                 colNames: ['Inv No', 'Date', 'Amount', 'Tax', 'Total', 'Notes'],
  5.                 colModel: [
  6.                   { name: 'invid', index: 'invid', width: 55, sorttype: 'int' },
  7.                   { name: 'invdate', index: 'invdate', width: 90, sorttype: 'date', datefmt: 'Y-m-d' },
  8.                   { name: 'amount', index: 'amount', width: 80, align: 'right', sorttype: 'float' },
  9.                   { name: 'tax', index: 'tax', width: 80, align: 'right', sorttype: 'float' },
  10.                   { name: 'total', index: 'total', width: 80, align: 'right', sorttype: 'float' },
  11.                   { name: 'note', index: 'note', width: 150, sortable: false }],
  12.                 rowNum: 10,
  13.                 viewrecords: true,
  14.                 caption: 'My first grid',
  15.                 autowidth: true,  // set 'true' here
  16.                 shrinkToFit: true // well, it's 'true' by default
  17.             });

Now my grid fills 100% of parent’s width.

To bind window.onresize event and automatically expand or collapse grid when its container expands or collapses:

  1. $(window).resize(function () {
  2.             var outerwidth = $('#grid').width();
  3.             $('#list').setGridWidth(outerwidth); // setGridWidth method sets a new width to the grid dynamically
  4. });

Check standalone example: Responsive jqGrid-2 (with Twitter Bootstrap) in action >>

*Note: If you need your code to be backwards compatible with jQuery 1.7 or earlier versions, feel free to use .bind() and .unbind() instead of event handlers with .on() and .off() – i.e. instead of .resize(), this method is a shortcut for .on(‘resize’, handler):

  1. $(window).unbind('resize.myEvents').bind('resize.myEvents', function () {
  2.         var outerwidth = $('#grid').width();
  3.         $('#list').setGridWidth(outerwidth);
  4.     });

Related post:
You could be interested to read about Responsive DHTMLX Grid Table also.

Share Button

Check Related Posts:

5 Comments on “jqGrid: How to Make it Responsive (with Twitter Bootstrap)”

  1. 1 Simon said at 11:30 pm on May 22nd, 2015:
    Reply  |  Quote

    I am using the first method because my grid is super wide, so needs the scroll. Works great except the pager is now not centered because it is full page width. How do I fix that?

  2. 2 Julia said at 4:10 pm on June 5th, 2015:
    Reply  |  Quote

    Hi Simon,
    Can you please provide the link?

  3. 3 Vipul said at 11:14 am on September 4th, 2015:
    Reply  |  Quote

    Excellent work Julia, I really appreciate your efforts. Keep it up.

  4. 4 Tom said at 4:06 pm on June 21st, 2016:
    Reply  |  Quote

    Just a quick note: version 5 of jQGrid has a responsive attribute that handles the resizing to the parent container. Just set the option like so:

    autowidth: true, // set ‘true’ here
    responsive: true,

  5. 5 Andrew said at 1:07 pm on May 2nd, 2017:
    Reply  |  Quote

    I have modified css of jQGrid in a new way, that will support bootastrap design also. You need following things to configure this jQGrid

    1) Font Awesome Style

    2) jQGrid Latest bundle

    New full CSS and full javascripts coding is included http://www.techdoubts.net/2015/11/working-jqgrid-responsive-css-boostrap.html here.


Leave a Reply


  • four + = 12

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now