kendo-ui - Kendo 网格可调整列宽

Question

网格列可以调整大小。我想存储用户调整的列宽并在下一个 session 开始时恢复它们。

我发现存储列宽的最佳方法如下:

var element = $('#grid').kendoGrid({
   ...
    resizable: true,
    columnResize: function(e) {
        var state = {};
        this.columns.every(function(c,i) {
            state[c.field] = c.width;
            return true;
        });
        var state_txt = JSON.stringify(state);
        localStorage['profile_userprofile_grid_column_width'] = state_txt;
    }
}

现在我想恢复上一个用户 session 中保存的列宽。我可以从存储中读取列宽:

var state = JSON.parse(localStorage['profile_userprofile_grid_column_width']);

如果此时已经创建网格，有人知道将这些值应用回网格的一些优雅方法吗？调整大小句柄在内部执行它，所以这是可能的，但在网格源中执行它的代码很丑陋。

Answer 1

您可以触发 columnResize 事件后初始化，如下所示

function grid_columnResize(e) {
  // Put your code in here
  console.log(e.column.field, e.newWidth, e.oldWidth);
}
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  resizable: true
});
var grid = $("#grid").data("kendoGrid");
grid.bind("columnResize", grid_columnResize);

Documentation