Question

EDIT: Final solution is below.

Whether I try to implement column re-ordering via header dragging or via the column chooser plugin, after re-ordering the columns, clicking on any column header to sort results in the sorted columns being loaded into their original positions in the table. Using the sortable method:

sortable: { 

update: function (perm) {
    /*
     * code to save the new colmodel goes here
    */
    // the following line doesn't seem to do anything... just seems to return an array identical to 'perm'
    $("#mainGrid").jqGrid("getGridParam", "remapColumns");

    // if included, the next line causes the headers to not move
    $("#mainGrid").jqGrid("remapColumns", perm, true); 

    // this alternate allows them to move, but the newly sorted columns still get remapped to their original position
    $("#mainGrid").jqGrid("remapColumns", [0,1,2,3,4,5,6,7,8,9,10,11,12], true);

    /* the following allows the headers to move, and allows the sort to occur ONLY
     * if the order coming back from the database is unchanged. Note that in my real
     * code I create an array of consecutive integers to pass as the first param to
     * remapColumns()
     */
    $("#mainGrid").jqGrid("remapColumns", [0,1,2,3,4,5,6,7,8,9,10,11,12], true, false);
}
}

When the page is reached for the first time, it creates a default column model from an xml file. When the user re-orders the headers, the new column model and column names are stored in the database as JSON strings. When the user makes another database call, the function reads the new column order from the database and creates the data array with the new ordering.

The problem seems to be that after jqGrid has remapped the columns, it still expects to see the data coming back from the server in the original order. So if the original data was

[ [A1, B1, C1], [A2, B2, C2], [A3, B3, C3] ]

after remapping the columns to the order C | A | B, jqGrid still wants the data to came back in the original order.

My final solution was to remove the code that saves the column model state from the sortable.update() function and to put it into window.onbeforeunload(). This way, the state is only saved when the user exits the page.
Hope this helps someone else.

Answer 1

See edited question. Without a method to update the colModel, the best solution seems to put the state save function into window.onbeforeunload().