Kendo网格可调整列宽

时间:2013-12-04 15:57:11

标签: kendo-ui kendo-grid

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

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

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

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

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

如果此时已经创建了这些值,有人会知道将这些值应用回网格的优雅方法吗? resize句柄在内部执行,所以它是可能的,但是在网格源中执行它的代码很难看。

1 个答案:

答案 0 :(得分:0)

您可以在启动后触发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