I would like to set Kendo UI grid column widths programmatically. I am using the following code:
function setColumnWidths(grid, options) {
for (var i = 0; i < options.columns.length; i++) {
grid.columns[i].width = options.columns[i].width;
}
}
When debugging in chrome after the statements executed, grid.columns[i].width seems to be appropriately set to the new value, however nothing changes in the GUI, the column widths remain the same. What am I missing?
You need to change grid's width through its element instead of its definition. Kendo grid contains header and content, so you need to change two elements.
Use this code instead
$("#grid-id .k-grid-header-wrap").find("colgroup col").eq(xx).width(yy);
$("#grid-id .k-grid-content").find("colgroup col").eq(xx).width(yy);
I've ended with this. Dion's solution gave me starting idea about using colgroups, however that solution is limited to not having locked columns, what are in different colgroups.
Also note: I do not want to use grid.setOptions, because its limitations, ruining attached events and header (in case of using ASP MVC helper to render the grid)
function setColumnWidths(grid, options) {
var lockedCount = 0;
for (var i = 0; i < options.columns.length; i++) {
if (options.columns[i].hasOwnProperty('locked')) {
if (options.columns[i].locked) {
lockedCount++;
}
}
}
for (var i = 0; i < options.columns.length; i++) {
var width = options.columns[i].width;
grid.columns[i].width = width;
if (options.columns[i].hasOwnProperty('locked') && options.columns[i].locked) {
$("#grid .k-grid-header-locked").find("colgroup col").eq(i).width(width);
$("#grid .k-grid-content-locked").find("colgroup col").eq(i).width(width);
} else {
$("#grid .k-grid-header-wrap").find("colgroup col").eq(i-lockedCount).width(width);
$("#grid .k-grid-content").find("colgroup col").eq(i - lockedCount).width(width);
}
}
// Hack to refresh grid visual state
grid.reorderColumn(1, grid.columns[0]);
grid.reorderColumn(1, grid.columns[0]);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.