Resize Jqgrid Based on Number of Rows

Resize jqGrid based on number of rows?

That's built into the grid. You set height to 100%. There's a demo on this page if you go "Advanced -> Resizing.

Resize jqGrid according to number of columns in the grid

You can use setColWidth method (included in free jqGrid) to change the width of the last column dynamically. I don't know which scenario for loading the grid you use. The modification of the demo could be the following: http://jsfiddle.net/OlegKi/andm1299/37/ where

$(window).bind("resize", function () {
    var p = $grid.jqGrid("getGridParam"),
        cm = p.colModel[p.iColByName.ComboDuration];

    $grid.jqGrid("setGridWidth", $grid.closest(".container-fluid").width());
    $grid.jqGrid("setColWidth", "ComboDuration", p.width - p.tblwidth + cm.width);
}).triggerHandler("resize");

The above code first resize the width of grid based on the width of the outer container and then adjust the width of the last column based on the difference between the width of the main grid table and the total width of the grid.

JQGrid reduce the no of columns on window resize event

Please include always in your questions the information about the version of jqGrid, which you use (or which you can use), and the fork of jqGrid (free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7).

If you use free jqGrid fork, then you can just add properties like classes: "hidden-xs", labelClasses: "hidden-xs" or classes: "hidden-xs hidden-sm", labelClasses: "hidden-xs hidden-sm" in the corresponding columns. See the demo from the old answer for more details. If you don't use Bootstrap CSS, you can add the definition of hidden-** classes manually:

@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}

If you use an old version of jqGrid and you really can't upgrade to free jqGrid or Guriddo then you can try to use

$(window).bind("resize", function () {
    // your resize handler
}).triggerHandler("resize");

and to call hideCol or showCol to hide/show the column on resizing. If you would need to follow the way, I'd recommend you to cache the list of hidden/visible columns to call hideCol or showCol only if the changes are really required. To detect the current resolution you can use window.matchMedia (see here) or to get the width of some outer div of the grid (outer div of <table id="list2"></table>).

UPDATED: I created the demo https://jsfiddle.net/OlegKi/n6g78two/, which uses jqGrid 4.6 and which demonstrates how to use window.matchMedia to hide/show some columns on resizing the grid. The demo hides the last column "ComboDuration" if the the width of view ports is 767 pixels wide or less. It uses the following code:

function hideOrShowColumns (e) {
    if (e.matches) {
        // we have view ports of 767 pixels wide or less
        $grid.jqGrid("hideCol", "ComboDuration");
    } else {
        $grid.jqGrid("showCol", "ComboDuration");
    }
}
var mql = window.matchMedia('(max-width: 767px)');
hideOrShowColumns(mql);
mql.addListener(function (e) {
    hideOrShowColumns(e);
});

$(window).bind("resize", function () {
    $grid.jqGrid("setGridWidth", $grid.closest(".my-container").width());
}).triggerHandler("resize");

Count number of rows based on filter JQGrid

There are many ways to do this, but it is needed to have more information on your jqGrid configuration - like datatype, loadonce and etc.

To solve the problemin based on your information, you can just use the getCol, but to return array from object values and then looping this array can give you the needed result.

var colvals = grid.jqGrid("getCol", colName, true),
len = colvals.length,
i=0,
yescounter=0;

while(i<len) {
    if(colvals[i].value === 'Yes') {
        yescounter++;
    }
    i++;
}

Hope this helps

JqGrid: make the width of rows auto shrink and grow depending on the width of browser viewport?

I do this on my apps with jQGrid. Here are some of my grid settings:

autowidth: true,
height: '100%',
shrinkToFit: false,

Below the creation of my grid, I use the window.resize function of jQuery:

$(window).resize(function () {
    $gridName.jqGrid('setGridHeight', $(window).height() - 160);
    $gridName.jqGrid('setGridWidth', $(window).width() - 210);
});

I subtract - 210 from the window's width to account for a left content area that is 210px wide.

I subtract - 160 from the window's height to account for a header content area that is 160px high.

How to increase the row number column width in jqGrid

You can control the width of the show row numbers columns by settings the rownumWidth property (default is 25).

from http://www.trirand.com/blog/phpjqgrid/examples/appearance/rownumbers/default.php

FreeJqGrid : How to resize the whole grid after a .show() event

You can use onShowHideCol callback or "jqGridShowHideCol" event to make some action after showCol or hideCol. For example you can use

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

// resize the grid on showing/hiding columns
grid.bind("jqGridShowHideCol", function () {
    resizeGrid();
});

// resize the grid on resizing the window
$(window).bind("resize", function () {
    resizeGrid();
});

See the answer and this one for code examples about resizing the grid on resizing the window. See the demo and this one.

---

Related Topics