jqGrid: is there an event for when columns are reo

Question

I'm using the column reordering feature in jqGrid

$grid = jQuery("#list").jqGrid({
    sortable:true,
    ...
});

Is there an event that fires after columns are re-ordered? If there is, I can't see it!

Thanks in advance

Answer 1

The comment given by @msanjay is the best way of doing this and here is the code which worked for me.

var globalvar_sortingorder;

jQuery('#gridId').jqGrid({
.......
  sortable: { update: function(relativeColumnOrder) {
                    var grid = jQuery('#gridId');
                    var columnOrder=grid.jqGrid("getGridParam", "remapColumns");
                // columnOrder now contains exactly what's necessary to pass to to remapColumns
                // now save columnOrder somewhere

            globalvar_sortingorder=columnOrder;

                    }}
....
});

To restore the column order

if(getObjectFromLocalStorage("sortingorder"))   {       
jQuery('#gridId').jqGrid('remapColumns', globalvar_sortingorder, true, false);          
}

Answer 2

The demo for the jqGrid sortable rows plugin says that all available options and events from sortable widget can be used.

If that's right then you should be fine just using the update event that's part of the sortable plugin.

Answer 3

Found after reading Mr W's reply and experimenting a bit, there's a better way of doing things:

$("#gbox_" + gridid).bind("sortstop", function(){
    // you can even get the current permutation!
    // Yes, it looks like you may be grabbing the remapColumns function.
    //    You're not, you get an array of integers back.
    grid.jqGrid("getGridParam", "remapColumns");
})

Enjoy!

Answer 4

use this one

$("#list").navGrid('#pager1', { edit: true, add: true, del: true });

Answer 5

This works:

[EDITED]

$('.ui-jqgrid-hbox table', $('#' + gridId).parents('.ui-jqgrid-view')).bind("sortstop", function () { onGridColumnReordered(gridId) })

where you need to pass your gridId and create that onGridColumnReordered function of course.

Answer 6

There is a call in grid.jqueryui.js (jqGrid v3.8.2) in update() to ts.p.sortable.update() as discussed on the jqGrid message board, so:

jQuery('#gridId').jqGrid({
    ...,
    sortable: { update: function(permutation) {
        alert('save permutation somewhere');
    },
    ...
});

However, please note that the array passed to your callback will be relative to the current column order. In other words, saving the array as is after moving multiple columns will not produce the desired results.

I had to do something like this:

var defaultColNames = [ 'Alpha', 'Beta', 'Gamma' ];
var defaultColModel = [
    { name: 'alpha', index: 'alpha' },
    { name: 'beta', index: 'beta' },
    { name: 'gamma', index: 'gamma' }
];

jQuery('#gridId').jqGrid({
    ...,
    colNames: defaultColNames,
    colModel: defaultColModel,
    sortable: { update: function(relativeColumnOrder) {
        var grid = jQuery('#gridId');

        var defaultColIndicies = [];
        for( var i=0; i<defaultColModel.length; i++ ) {
            defaultColIndicies.push(defaultColModel[i].name);
        }

        if( grid.getGridParam('treeGrid') ) {
            // tree grid mode adds 5 extra columns
            defaultColIndicies = defaultColIndicies.concat(['level','parent','isLeaf','expanded','loaded']);
        }

        var columnOrder = [];
        var currentColModel = grid.getGridParam('colModel');
        for( var j=0; j<relativeColumnOrder.length; j++ ) {
            columnOrder.push(defaultColIndicies.indexOf(currentColModel[j].name));
        }

        // columnOrder now contains exactly what's necessary to pass to to remapColumns
        // now save columnOrder somewhere
        globalColumnOrder = columnOrder;
    },
    ...
});

// grab saved column order from cookie or something
var globalColumnOrder = [0,1,2];

// append to array if tree grid enabled
if( jQuery('#gridId').getGridParam('treeGrid') ) {
    // tree grid mode adds 5 extra columns
    for( var k=defaultColNames.length; k<(defaultColNames.length+5); k++ ) {
        globalColumnOrder.push(k);
    }
}

// restore column order
jQuery('#gridId').jqGrid('remapColumns', globalColumnOrder, true, false);