Question

i have used setColumns function to show/hide columns dynamically on client-side.

now i want to reset all the columns to default view.. how to do that.

the following is the code i used

$("#list").navButtonAdd('#pager', {
  caption: "View",
  title: "Click here to select Columns to view",
  onClickButton: function() {
    var params = {width:500,modal:true,drag:true};
    jQuery("#list").setColumns(params);
  },
  position: "last"
});

i need something like reset.

refresh button for the jqgrid is just refreshing the table with selected columns but not reseting them.

thanks,
Sandeep

Answer 1

I can save the original colModel parameter in a variable and use the initial values of hidden properties to show or to hide the columns:

var grid = $("#list"),
    cm = [
        { name:'id', hidden:true, ... }, // initially hidden column
        { name:'name', ...},             // initially non-hidden column
        ...
    ];
grid.jqGrid({
    colModel:cm,
    // ... other jqGrid parameters
});
grid.jqGrid('navButtonAdd','#pager', {
    caption: "Reset Columns",
    title: "Click here to select Columns to view",
    onClickButton: function() {
        var i=0, cmi, l=cm.length;
        for (;i<l;i++) {
            cmi=cm[i];
            if (typeof cmi.hidden === 'undefined' || cmi.hidden === false) {
                grid.jqGrid('showCol',cmi.name);
            } else {
                grid.jqGrid('hideCol',cmi.name);
            }
        }
    },
    position: "Reset"
});

See the demo here.