Kendo Grid：在columnReorder事件中保存狀態

Question

我創建了一些代碼來保存和恢復列順序，如果我可以保存正確的數據，它也可以用於調整大小。 似乎，當“columnReorder”事件觸發時，新的列順序實際上還沒有保存 - 所以盡管我的列保存和恢復功能確實有效，但它落后了一步。 有人知道如何獲取“新”列信息，或者在重新訂購完成后捕獲事件嗎？ 這是魔術的一部分......

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

注意：新的列順序似乎不在事件的“e”中，但那是合理的位置，對吧？

Answer 1

您可以檢查e.column （已移動的列）， e.newIndex （重新排序后的位置）和e.oldIndex （來自哪里）以在重新排序后派生訂單。 做你想做的最簡單的方法是使用setTimeout ：

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

（ 演示 ）