Kendo Grid: Saving State in columnReorder event

Question

I created some code to save and restore the column order, and it will also work with resizing if I can get it to save the right data. It seems that, when the "columnReorder" event fires, the new column order isn't actually saved yet - so in spite of the fact that my column saving and restoring function does work, it's one step behind. Does anybody know how to get the "new" column information, or capture the event after the re-order has been done? Here's the part that does the magic...

    var colCook = getCookieColumns();

    //setup user columns or cookie columns as appropriate
    $("#disputesGrid").kendoGrid({
        dataSource: myDataSource,
        columns: (colCook != null) ? JSON.parse(colCook) : {default column values},
        pageable: {
            refresh: true,
            pageSizes: [10, 25, 50, 100],
            buttonCount: 10,
            input: true
        },
        reorderable: true,
        columnReorder: function (e) { saveColumnsCookie(); },
        sortable: true,
        resizable: true,
        selectable: "multiple row"
    });
}

function getCookieColumns() {
    var cookiesArray = document.cookie.split(';');
    for (var i = 0; i < cookiesArray.length; i++) {
        var c = cookiesArray[i].trim();
        if (c.indexOf("DisputeGridViewColumns=") == 0) return c.substring(23, c.length);
    }
    return null;
}

function saveColumnsCookie() {
    //saves the current column information into a cookie
    try {
        var d = new Date();
        d.setTime(d.getTime() + (365 * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toGMTString();
        document.cookie = "DisputeGridViewColumns=" + kendo.stringify($("#disputesGrid").data("kendoGrid").columns) + "; " + expires;
    } catch (x) { 
        //it fails when the grid isn't initialized - we can just ignore that
    }
}

Note: the new column order does not seem to be in the "e" of the event, but that's the reasonable place, right?

Answer 1

You can inspect e.column (the column that was moved), e.newIndex (where it will be after reordering) and e.oldIndex (where it came from) to derive the order after reordering. The easiest way to do what you want is to use setTimeout:

columnReorder: function(e) {
    var that = this;
    setTimeout(function() {
        console.log(kendo.stringify(that.columns));
    }, 5);
}

(demo)