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 fires after columns are re-ordered? If there is, I can't see it!

Thanks in advance

Apochromatic

Answer 1

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

Almazan

thanks, the sortable function's update option worked for me, combined with grid.jqGrid("getGridParam", "remapColumns") as suggested by groxx which seemed to get the same column order – Dullish

@Almazan Do you know if there is a way to abort the permutation of a column? – Berretta

Answer 2

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!

Piquant

Answer 3

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.

Crites

Did not work for me at all. It doesn't look like any event binding successfully happens. – Mystagogue

Answer 4

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.

Deaconry

Thanks... I thought that looked promising too. However I still can't figure out how I can set a handler for this event. I've tried adding update: function(event, ui) { alert(""); } when I initialize the grid, and also $("#list").bind("sortupdate", function() { alert(""); }); after the grid's initialized. But neither one works for me... Any pointers? – Apochromatic

Answer 5

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

Akvavit

Answer 6

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

Cantu

Answer 7

use this one

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

Isobaric