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?

Wild

#17934604 – Clay

#17934604 – Clay

Answer 1

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.

Wild

I still find that this extensions gives the same result as the new native "autowidth: true" setting. Meaning, it only affects the grid at the initial time the page is rendereed. But, if you resize your page it does not update the jqGrid to match the new width. – Jeana

@Meri appears so. check archive.org though: web.archive.org/web/20140223090705/http://old.stevenharman.net/… – Wild

Answer 2

autowidth: true from 3.5 onwards

Flipper

"autowidth: true" only initializes the grid to the same size as the parent element currently has. Resize your page and everything gets screwed up – Morsel

i use this. but when i use table in another page, it does not workr :( what can i do? – Belak

@Morsel - I have a solution for that now, see below. – Chophouse

Answer 3

It works for me:

width: null,
shrinkToFit: false,

Crystacrystal

This worked for me where autowidth didn't. I have a grid in an accordian which isn't active when the page loads. Thanks. – Longtin

This should be the correct answer, the grid resizes with the parent and takes up 100% width – Handmaid

yes, this answer is better. The grid remain 100% of a parent even after resizing the parent. It is better than "autowidth: true". Thanks. – Memorandum

but you have to manually set the size of each column of your grid if you are applying this... plus the columns don't shrink along with grid when screen size changes... rather grid become horizontally scrollable – Significant

Definitely a hack but a beautiful one at that. I get the importance of needing an explicit setting of width if you want columns resized, but if not, this behavior should definitely be a standard option. – Fructiferous

This is works great for me. The grid follow parent size on browser window resizing. – Bloodworth

Works fine for me. I have already set the width for each column in my tables. So this one saves some code for me. – Abeyta

Answer 4

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);
}

Meri

Answer 5

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

Psychologism

Answer 6

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;

Turtleneck

But consider to add throttling to your event handler. – Chophouse

Answer 7

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

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

Obscurantism

Answer 8

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.

Schacker

Answer 9

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

Hilly

onSuckyAnswer: function() { alert("Random snippets of code do not an answer make. Explain what to do with them."); } – Fieldpiece

Answer 10

Simpler

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

Provoke

Answer 11

Try this,

Replace width: 1100 to autowidth: true,

Zaller

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.

Canter

Answer 13

I have done this and working like charm.

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

Telfore

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]);
 }));

Chophouse