JQGrid reduce the no of columns on window resize event

Question

I'm having a problem with jqGrid. I have a table with many columns. When I change the window or If open the web app in a mobile device, It should show only 4 or 5 columns in the grid table instead of many columns or else It should allow scrolling within the grid. So how to reduce the number of columns in the JQGrid on the window resize event?.

I have tried like following and the resize event is working fine but look&feel is not good due to more columns in the grid and no scroll bar.

My Html,

<table id="list2"></table>

My jqGrid code,

 $("#list2").jqGrid({
    url: '/Project/GridData',
    datatype: "json",
    mtype: 'POST',
    colNames: ['edit', 'view','id','Project_Name','Project_Name2','Project_Nam3','Project_Number','Project_Manager', 'Business_Unit', 'Project_Admin_Name', 'Remarks', 'Is_Active', 'Created_Date','Modified_Date'],
    colModel: [
        { name: 'edit', index: 'edit', width: 55 },
        { name: 'view', index: 'view', width: 55 },
        { name: 'id', index: 'id', width: 55, hidden: true },
        { name: 'Project_Name', index: 'Project_Name', width: 140 },
        { name: 'Project_Name2', index: 'Project_Name2', width: 140 },
        { name: 'Project_Name3', index: 'Project_Name3', width: 140 },
        { name: 'Project_Number', index: 'Project_Number', width: 140 },
        { name: 'Project_Manager', index: 'Project_Manager', width: 140 },
        { name: 'Business_Unit', index: 'Business_Unit', width: 140 },
        { name: 'Project_Admin_Name', index: 'Project_Admin_Name', width: 140, align: "right" },
        { name: 'Remarks', index: 'Remarks', width: 180, align: "right" },
        { name: 'Is_Active', index: 'Is_Active', width: 100, align: "right" },
        { name: 'Created_Date', index: 'Created_Date', width: 150, sortable: false },
        { name: 'Modified_Date', index: 'Modified_Date', width: 150, sortable: false }
    ],
    rowNum: 10,
    rowList: [10, 20, 30,50,100,500,1000],
    //pager: '#pager2',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    loadonce: true,
    ignoreCase: true,
    viewrecords: true,
    pagepos: 'left',
    forceFit: true,
    shrinkToFit: false, // to enable the scroll bar in the responsive mode
    height: 500,
    width:1600,
    altRows:true,
    altclass:'myAltRowClass'

});

My Script,

var $grid = $("#ProjectSearchGrid"),
    newWidth = $grid.closest(".ui-jqgrid").parent().width();
    $grid.jqGrid("setGridWidth", newWidth, true); // change the grid size based on parent div size
    $grid.jqGrid('setColProp','ProjectName',{width:100}); //change the column size for consistent look in the mobile device

Answer 1

You can use the methods: showCol and hideCol to hide/show columns on condition. Note that these method accepts array as parameter to show and hide more columns at once. Docs can be found here.

By example you can do this

var $grid = $("#ProjectSearchGrid"),
$grid.jqGrid("hideCol", ["Project_Name2", "Project_Name3"]); // hide these cols before resizing
newWidth = $grid.closest(".ui-jqgrid").parent().width();
$grid.jqGrid("setGridWidth", newWidth, true);

Additionally to this if you use Guriddo jqGrid you can hide some columns when the grid loads in mobile device using the function isMobile .

By example to do this for column Project_name2 you can do

colModel: [
    ...
    { name: 'Project_Name2', index: 'Project_Name2', width: 140, hidden: $.jgrid.isMobile() },

Answer 2

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