Kendo grid resizable column width

Question

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.

dcodesmith dcodesmith · Accepted Answer · 2013-12-04T21:41:32

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

Documentation

Kendo grid resizable column width

1 Answers