Programmatically Changing the Width of a Grid Column
Description
When working with the Grid for Progress® Kendo UI®, you might need to programmatically change the width of one or more columns. This article demonstrates how to adjust column widths dynamically. This KB article also answers the following questions:
- How to set column widths dynamically in a Kendo UI Grid?
- Can I update Grid column settings after initialization?
- How to use
setOptions()method to modify Grid properties?
Environment
| Product | Grid for Progress® Kendo UI® |
| Version | 2024.3.1015 |
Solution
To programmatically change the width of Grid columns, use the setOptions() method. This approach allows you to update the Grid's column widths after it has been initialized. Follow these steps:
- Define a list with the desired widths for each column.
const list_of_columns_width = [500, 110, 120, 130, 50, 60];
- Obtain a reference to the Grid instance.
let grid = $("#grid").data("kendoGrid");
- Iterate over the Grid columns and apply the widths from
list_of_columns_width.
let gridColumns = grid.columns;
for (var i = 0; i < grid.columns.length; i++) {
if (i < list_of_columns_width.length) {
const any_column_width = list_of_columns_width[i];
gridColumns[i].width = any_column_width;
}
}
- Update the Grid's options with the modified columns.
grid.setOptions({
columns: gridColumns
});
Note: Use the setOptions() method with caution and avoid calling it inside event handlers like dataBound to prevent endless loops.
When updating the Grid's columns using setOptions(), all other Grid options remain as initially defined. Only the specified options (in this case, column widths) are updated.
Explore a live example in the following Dojo demo:
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
const list_of_columns_width = [500, 110, 120, 130 ,50, 60];
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: {
type: "number"
},
ShipCountry: {
type: "string"
},
ShipCity: {
type: "string"
},
ShipName: {
type: "string"
},
OrderDate: {
type: "date"
},
ShippedDate: {
type: "date"
}
}
}
},
pageSize: 15
},
height: 550,
sortable: true,
resizable: true,
pageable: true,
dataBound: function() {
for (var i = 0; i < this.columns.length; i++) {
if (i < list_of_columns_width.length) {
const any_column = this.columns[i];
const any_column_width = list_of_columns_width[i];
any_column.width = any_column_width
}
}
},
columns: [
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
},
{
field: "ShipCountry",
title: "Ship Country"
},
{
field: "ShipCity",
title: "Ship City"
},
{
field: "ShipName",
title: "Ship Name"
},
{
field: "ShippedDate",
title: "Shipped Date",
format: "{0:MM/dd/yyyy}"
},
{
field: "OrderID",
title: "ID"
}
]
});
let grid = $("#grid").data("kendoGrid");
let gridColumns = grid.columns;
for (var i = 0; i < grid.columns.length; i++) {
if (i < list_of_columns_width.length) {
const any_column_width = list_of_columns_width[i];
gridColumns[i].width = any_column_width;
}
}
grid.setOptions({
columns: gridColumns
});
});
</script>
</div>