Kendo网格可调整大小的列宽 [英] Kendo grid resizable column width

问题描述

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

The grid columns may be resizable. I want to store user-adjusted columns width and restore them when the next session starts.

存储列宽的最佳方法是:

The best way to store columns width I've found is the following:

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

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

Now I want to restore column width saved in the previous user session. I can read columns width from the storage:

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

如果此时已经创建了网格，是否有人知道将这些值应用回网格的简便方法?调整大小手柄是在内部完成的，因此可以实现，但是在网格源中执行此操作的代码很丑.

Does somebody know some elegant way to apply these values back to the grid if it is already created at this time? The resize handle does it internally, so it is possible, but the code doing it in the grid source is ugly.

推荐答案

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

You can trigger the columnResize event post initilisation as shown below

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

文档

这篇关于Kendo网格可调整大小的列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！