How to adjust Kendo UI table column width programmatically

Question

I want to adjust the column width of a Kendo UI table 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 executing the grid.columns [i] .width statements, it seems appropriately set for the new value, however, nothing changes in the graphical interface, the column width remains unchanged. What am I missing?

Answer 1

I am done with this. Dion's solution gave me the idea of ​​using colg groups, but this solution is limited by the absence of locked columns, which is in different groups.

Also note: I do not want to use grid.setOptions, because of its limitations, destroying the attached events and the header (in the case of using the 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]); } 

Answer 2

You need to change the width of the grid through your element, not its definition. The Kendo grid contains the title 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); 

Example