1

I am using jqGrid with the option sortable:true and also using the columnChooser plugin. I would like to create a reset button which will

  1. Reorder the columns to the original state
  2. Add back all columns which might have been hidden by columnChooser plugin. This I was able to accomplish using the answer provided here

However, how do I accomplish the first point reordering the column to original state.

Community
  • 1
  • 1
Nehal Damania
  • 8,671
  • 9
  • 37
  • 52
  • I think this demo must be helpful. http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWithSetColumn.htm – Rajshekar Reddy Feb 17 '16 at 07:51
  • Yes, Using the same example in the demo, I am able to get all the columns. However, I am not able to reorder the columns to the original state. The Demo doesn't have column reordering – Nehal Damania Feb 17 '16 at 08:12
  • you can save the colModel in a variable and then when ever you want to get back original state then just use the colModel data – Rajshekar Reddy Feb 17 '16 at 08:43
  • http://stackoverflow.com/questions/6040550/jqgrid-reset-all-columns-to-default-after-setcolumns is the answer here helpful? – Rajshekar Reddy Feb 17 '16 at 08:44
  • I have done the same as mentioned in the question. But, it does not reset the column ordering sadly – Nehal Damania Feb 17 '16 at 08:45

3 Answers3

1

Restore hidden state of all columns is very simple and you found already the corresponding code examples. Thus I answer how to reset the column order.

The problem is that the method remapColumns which can be used to reorder the columns use column numbers instead of column names. The same problem exist in many other methods or internal parameters of jqGrid. To use the method remapColumns you need to use the index of columns based on the current index order. After the user changed the order of columns multiple times it would be difficult to provide the column numbers which you want to have relatively to the current column order. It would be much more easy to hold the names of columns instead of column indexes.

I develop free jqGrid as a fork of jqGrid after Tony had changed the licence agreement of jqGrid and renamed it to Guriddo jqGrid JS. I implemented many changes in jqGrid which disturbs my and have implemented many new features. One from the changes was moving all internal options to holding names instead of indexes as far it was possible without breaking the compatibility to the previous versions. I added the method remapColumnsByName, which simplifies the usage of column remapping (see the answer with the demo).

The implementation of your requirements in free jqGrid could be very simple. You need just save the original column order in an array and then use it as the parameter of remapColumnsByName to reset the columns

$("#grid1").jqGrid({
    ...
    onInitGrid: function () {
        var p = $(this).jqGrid("getGridParam");
        // save names of columns in custom option of jqGrid
        p.originalColumnOrder = $.map(p.colModel, function (cm) {
            return cm.name;
        });
        //alert(JSON.stringify(p.originalColumnOrder));
    }
}).jqGrid("navGrid", { add: false, edit: false, del: false })
.jqGrid("navButtonAdd", {
    buttonicon: "fa-repeat",
    caption: "",
    title: "Reset original column order",
    onClickButton: function () {
        var $self = $(this), p = $self.jqGrid("getGridParam");
        $self.jqGrid("remapColumnsByName", p.originalColumnOrder, true);
    }});

See the demo https://jsfiddle.net/OlegKi/r6b2os5b/2/

If you can't migrate to free jqGrid because of some reasons then you have to simulate the same behavior. You should save original column order as array of column names and then to convert the names to indexes directly before calling of remapColumns. It should work too.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
1

Reorder the columns to the original state

I just came across this question, I have implemented this functionality with a simple javascript function.

First get the column order when the grid is initialized:

var initialcolumnorder = $("#Grid").getGridParam('colNames');

Call the below function where required with initialcolumnorder as parameter

function resetColumnOrder(initialcolumnorder)
{  
     var currentColumnOrder = $("#Grid").getGridParam('colNames');
     var columnMappingArray = [];
     $.each(initialcolumnorder, function (index, value) {
         var currentIndex = $.inArray(value, currentColumnOrder);
         columnMappingArray.push(currentIndex);   
     });

     $("#Grid").remapColumns(columnMappingArray, true, false);
}
C. Helling
  • 1,394
  • 6
  • 20
  • 34
Praveen
  • 11
  • 1
0

I was able to create a "reset columns" function with our grid based off of some of the answers I read in the discussions (I would love to give credit, but this is a patchwork of many different solutions to different issues and I didn't track them all).

It will restore visibility, column order and frozen status. Also works if the column state was modified through the new column menu functionality.

(dgColModel is a global variable that contains my original colModel)

function resetColumns(grid) {
  //remapArray: 0 is the rownumber, 1 is the selection checkbox
  var i = 0, cmi, l = dgColModel.length, remapArray = [0, 1]; 
  for (; i < l; i++){
    cmi = dgColModel[i];
    if (typeof cmi.hidden === 'undefined' || cmi.hidden === false){
      grid.jqGrid('showCol', cmi.name);
    } else {
      grid.jqGrid('hideCol', cmi.name);
    }
    if (typeof cmi.frozen === 'undefined' || cmi.frozen === false){
      grid.jqGrid('setColProp', cmi.name, { frozen: false });
    } else {
      grid.jqGrid('setColProp', cmi.name, { frozen: true });
    }
    remapArray.push(getColumnIndexByName(grid, cmi.name));
  }
  grid.jqGrid("destroyFrozenColumns");
  grid.remapColumns(remapArray, true);
  grid.jqGrid("setFrozenColumns");
}

function getColumnIndexByName(grid, columnName)
{
  var cm = grid.jqGrid('getGridParam','colModel'),i=0,l=cm.length;
  for (; i<l; i++) {
    if (cm[i].name===columnName) {
        return i; // return the index
    }
  }
  return -1;
};

Hopefully this could become an actual grid function somewhere down the line (the colModel could be persisted when the grid is instanciated) but in the mean time this works pretty well.

I hope this helps!

krokador
  • 39
  • 6