jQGrid -To show some columns and hide some columns

Here is a simple tip on jqGrid.

Sometimes in jqGrid, there might be a requirement that we need to show some columns and hide some columns, let’s say, after save button is clicked. Here is the code for that.

HTML:

SCRIPT:

...
jQuery("#list").jqGrid({
   url:'Search.aspx?q=1',
datatype: "json",
   colNames:['Inv No','Date', 'Client','Notes'],
   colModel:[
   {name:'id',index:'id', width:55},
   {name:'invdate',index:'invdate', width:90},
   {name:'name',index:'name', width:150},
   {name:'note',index:'note', width:150, hidden: true}
   ],
   rowNum:10,
   rowList:[10,20,30],
   pager: '#pager',
   sortname: 'id',
        viewrecords: true,
        sortorder: "desc",
        caption:"JSON Example"
});

In the above code we need to hide the Client name column and show the next Notes column, which is hidden. Here is the javascript function for that.

function  ShowHideColumn () {
 
        // Position of the name column
var colPos = 3;
        var myGrid = $('#list');
        myGrid.jqGrid('hideCol', myGrid.getGridParam("colModel")[colPos].name);
        myGrid.jqGrid('showCol', myGrid.getGridParam("colModel")[colPos + 1].name);
}

I hope this helps as it helped me. Happy coding