jqGrid: is there an event for when columns are reordered?

Question

I\'m using the column reordering feature in jqGrid

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

Is there an event that fir

Answer 1

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 2

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

Answer 3

Would not this be much easier. Just using the ui element to map all the rows and finding their position by using sortable index() function ?

stop: function(e, ui) {
        console.log($.map($(this).find('tr.ui-widget-content'), function(el) {
            return el.id + ' = ' + $(el).index();
        }));
        } 

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

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!