Possible to make jqGrid stretch to 100%?

Question

Is it possible to make it so that a jqGrid will have a width set to 100%? I understand that column widths must be an absolute pixel size, but I've yet to find anything for setting the width of the actual grid to a relative size. For instance, I want to set the width to 100%. Instead of 100% it seems to use an odd size of 450px. There is more horizontal room on the page, but with the columns width and such, it will make the container(of only the grid) horizontally scroll. Is there some way around this?

Answer 1

autowidth: true from 3.5 onwards

Answer 2

It works for me:

width: null,
shrinkToFit: false,

Answer 3

I'm using this to set the width of the grid to the width of the parent container.

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

Answer 4

I ended up using the jqGrids.fluid extension to do this and it worked great.

UPDATE: That link seems to be dead, but the archived article can be viewed here.

Answer 5

wonderful function for this i found here (stackoverflow) cannot remember the post. I have the height portion commented out keep that in mind (was not working for me) but the width is perfect. throw this anywhere in your php file.

$resize = <<<RESIZE
jQuery(window).resize(function(){
    gridId = "grid";

    gridParentWidth = $('#gbox_' + gridId).parent().width();
    $('#' + gridId).jqGrid('setGridWidth',gridParentWidth);

   // $('#' + gridId).jqGrid('setGridHeight', //Math.min(500,parseInt(jQuery(".ui-jqgrid-btable").css('height'))));
})
RESIZE;

Answer 6

Try to set width to "null". It works for me.

$(grid).jqGrid({
   width: null,
});

Answer 7

You can try to fix the width of jqGrid with respect of a function which I described here Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog

Answer 8

Simpler

  $("#gridId").setGridWidth($(window).width() );

Answer 9

It looks like this is not supported. According to the docs for setGridWidth:

Sets a new width to the grid dynamically. The parameters are: new_width is the new width in pixels...

The docs for the width option also do not mention being able to set width as a percentage.

That being said, you can use the autowidth feature or a similar technique to give the grid the correct initial width. Then follow the methods discussed in resize-jqgrid-when-browser-is-resized to ensure the grid is properly resized when the browser window is resized, which will simulate the effect of having 100% width.

Answer 10

Try this,

Replace width: 1100 to autowidth: true,

Answer 11

loadComplete : function () {
     $("#gridId").jqGrid('setGridWidth', $(window).width(), true); 
},

Answer 12

You can't give width in percent, while if you want according to screen resolution then set as follows: var w = screen.width and then use this variable in width option of jqgrid.

Hope it will useful.

Answer 13

I have done this and working like charm.

$(document).ready(function () { $("#jQGridDemo").setGridWidth(window.innerWidth - offset); }); I have put offset of 50

Answer 14

I've noticed that only the combination of all 3 answers given, i.e. JohnJohn's answer, Bhargav's answer and Molson's answer helped me to achive a real automatic resize.

So I have created some code that takes advantage of all, see the snippet below. I've also improved it so you can either pass a single grid object or an array of grids to be resized.

If you try it out ensure that you

1. click on Run code snippet, and
2. then click on the "Full page" link button in the upper right corner.

Resize the window and watch how the grids changes their size and re-align automatically:

// see: https://free-jqgrid.github.io/getting-started/
// CDN used: https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid
$(function() {

  // pass one single grid, or an array of grids
  function resizeGrid(jqGridObj) {
  
    var $gridArray = Array.isArray(jqGridObj) ? jqGridObj : [jqGridObj];
    for(let i=0; i<$gridArray.length; i++) {
      var $grid=$gridArray[i],
      newWidth = $grid.closest(".ui-jqgrid").parent().width();
      $grid.jqGrid("setGridWidth", newWidth, true);
    }
    
  };
  
  // template for the 2 grids
  function createGrid(gridName, gridData) {
    var gridObj=$("#"+gridName); gridObj.jqGrid({
      autowidth: true, height: 45, 
      colNames: ['First name', 'Last name', 'Updated?'],
      colModel: [{name: "firstName"}, {name: "lastName"}, {name: "updated"}],
      data: gridData,
      loadComplete: function() { 
        // resize on load
        resizeGrid(gridObj);
      }      
    });
    return gridObj;
  }

  // instantiate Grid1
  var  data1 = [
      { id: 10, firstName: "Jane", lastName: "Doe", updated: "no"},
      { id: 20, firstName: "Justin", lastName: "Time", updated: "no" }
    ];    
  var gridObj1=createGrid("grid1", data1);

  // instantiate Grid2
  var  data2 = [
      { id: 10, firstName: "Jane", lastName: "Smith", updated: "no"},
      { id: 20, firstName: "Obi-Wan", lastName: "Kenobi", updated: "no" }
    ];    
  var gridObj2=createGrid("grid2", data2);
  
  function debounce(fn, delay) {
    delay || (delay = 200);
    var timer = null;
    return function () {
      var context = this, args = arguments;
      clearTimeout(timer);
      timer = setTimeout(function () {
        fn.apply(context, args);
      }, delay);
    };
  }
  
 function throttle(fn, threshhold, scope) {
    threshhold || (threshhold = 200);
    var last,
        deferTimer;
    return function () {
      var context = scope || this;

      var now = +new Date,
          args = arguments;
      if (last && now < last + threshhold) {
        // hold on to it
        clearTimeout(deferTimer);
        deferTimer = setTimeout(function () {
          last = now;
          fn.apply(context, args);
        }, threshhold);
      } else {
        last = now;
        fn.apply(context, args);
      }
    };
  }
    
  // change size with window for both grids
  jQuery(window).resize(throttle(function(){
    resizeGrid([gridObj1, gridObj2]);
   }));
  
});

<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Resizing jqGrid example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.min.js"></script>

<table id="grid1"></table>
<br/>
<table id="grid2"></table>

Note: While this example is simple, if you have more complex jqGrids you will need throttling or debouncing (the 2 functions throttle and debounce are taken from there), otherwise the resize event could be really slow. Follow the link to read more about it. I prefer throttling in this case because it looks smoother, but I have included both functions so you can use them if needed in your code.

In my real code I needed throttling, otherwise resizing was getting far too slow. The code snippet already includes a throttled handler with a default threshold of 200ms. You can experiment with it, for example if you replace throttle by debounce in the code snippet, i.e.

jQuery(window).resize(debounce(function(){
    resizeGrid([gridObj1, gridObj2]);
 }));