How to replace remapColums with remapColumnsByName in free jqgrid

First of all I want to mention that the code described in the old answer works not always correct. To explain the problem you can open the single row select demo for example and uses column chooser multiple times before reloading the grid. For example you can open column chooser first and change position of “Clients” column after “Tax” column. You will see correct results in the grid. Then you can open column chooser once more and move “Date” column after “Clients” column for example. You will see the columns in the order “Amount”, “Tax”, “Client”, “Date”, … Now you can reload the page. You will see that the reloaded page have wrong order of columns: “Client”, “Amount”, “Tax”, “Date”, … The reason on the problem: permutation used by column chooser or by remapColumns uses integer position of columns relatively to current order of columns. It makes saving of column order more complex. One have to hold original column order and recalculates always the values from permutation array to reordering of original colModel.

Alternatively one can saves column names instead of arrays with changed column position relatively to original column model. In other words one should replace permutation property of columnsState to something like cmOrder with array of column names in the grid, which choosed the user last time.

The method remapColumnsByName is very simple. It works like the method remapColumns, but its first parameter is array of column names instead of array of integer indexes.

The demo is quick and dirty changing of the single row select demo to use cmOrder property instead of permutation property in columnsState and to use the method remapColumnsByName additionally. If you would repeat the same test like I described at the beginning of my answer you will see that new demo don’t have the bug which I described before.

The most important parts of the demo which is different from original demo you will find below:

var getColumnNamesFromColModel = function () {
        var colModel = this.jqGrid("getGridParam", "colModel");
        return $.map(colModel, function (cm, iCol) {
            // we remove "rn", "cb", "subgrid" columns to hold the column information 
            // independent from other jqGrid parameters
            return $.inArray(cm.name, ["rn", "cb", "subgrid"]) >= 0 ? null : cm.name;
        });
    },
    saveColumnState = function () {
        var p = this.jqGrid("getGridParam"), colModel = p.colModel, i, l = colModel.length, colItem, cmName,
            postData = p.postData,
            columnsState = {
                search: p.search,
                page: p.page,
                rowNum: p.rowNum,
                sortname: p.sortname,
                sortorder: p.sortorder,
                cmOrder: getColumnNamesFromColModel.call(this),
                selectedRows: idsOfSelectedRows,
                colStates: {}
            },
            colStates = columnsState.colStates;

        if (postData.filters !== undefined) {
            columnsState.filters = postData.filters;
        }

        for (i = 0; i < l; i++) {
            colItem = colModel[i];
            cmName = colItem.name;
            if (cmName !== "rn" && cmName !== "cb" && cmName !== "subgrid") {
                colStates[cmName] = {
                    width: colItem.width,
                    hidden: colItem.hidden
                };
            }
        }
        saveObjectInLocalStorage(myColumnStateName(this), columnsState);
    },
    ...

moreover the loadComplete callback which restore the order of the columns is the following

loadComplete: function () {
    var $this = $(this), p = $this.jqGrid("getGridParam"), i, count;

    if (firstLoad) {
        firstLoad = false;
        if (isColState && myColumnsState.cmOrder != null && myColumnsState.cmOrder.length > 0) {
            // We compares the values from myColumnsState.cmOrder array
            // with the current names of colModel and remove wrong names. It could be
            // required if the column model are changed and the values from the saved stated
            // not corresponds to the 
            var fixedOrder = $.map(myColumnsState.cmOrder, function (name) {
                    return p.iColByName[name] === undefined ? null : name;
                });
            $this.jqGrid("remapColumnsByName", fixedOrder, true);
        }
        if (typeof (this.ftoolbar) !== "boolean" || !this.ftoolbar) {
            // create toolbar if needed
            $this.jqGrid("filterToolbar",
                {stringResult: true, searchOnEnter: true, defaultSearch: myDefaultSearch});
        }
    }
    refreshSerchingToolbar($this, myDefaultSearch);
    for (i = 0, count = idsOfSelectedRows.length; i < count; i++) {
        $this.jqGrid("setSelection", idsOfSelectedRows[i], false);
    }
    saveColumnState.call($this, this.p.remapColumns);
},

I want to repeat that the code from the new demo is far from be perfect. I just used the old code and fixed it to make it working in free jqGrid and by using new remapColumnsByName method.