Skip to content

Commit 9aed8ad

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 9bba36d commit 9aed8ad

File tree

2 files changed

+191
-7
lines changed

2 files changed

+191
-7
lines changed

‎docs/knowledge-base/how-to-programmatically-change-grid-column-width-kendo-ui.md‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
---
2+
title: Programmatically Changing the Width of a Grid Column
3+
description: Learn how to programmatically adjust the width of columns in a Kendo UI Grid.
4+
type: how-to
5+
page_title: How to Adjust Column Widths Programmatically in Kendo UI Grid
6+
slug: how-to-programmatically-change-grid-column-width-kendo-ui
7+
tags: grid, kendo ui, column width, setoptions, javascript
8+
res_type: kb
9+
ticketid: 1666957
10+
---
11+
12+
## Description
13+
14+
When working with the [Grid](https://docs.telerik.com/kendo-ui/api/javascript/ui/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:
15+
- How to set column widths dynamically in a Kendo UI Grid?
16+
- Can I update Grid column settings after initialization?
17+
- How to use `setOptions()` method to modify Grid properties?
18+
19+
## Environment
20+
21+
<table>
22+
<tbody>
23+
<tr>
24+
<td>Product</td>
25+
<td>Grid for Progress® Kendo UI®</td>
26+
</tr>
27+
<tr>
28+
<td>Version</td>
29+
<td>2024.3.1015</td>
30+
</tr>
31+
</tbody>
32+
</table>
33+
34+
## Solution
35+
36+
To programmatically change the width of Grid columns, use the [`setOptions()`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/setoptions) method. This approach allows you to update the Grid's column widths after it has been initialized. Follow these steps:
37+
38+
1. Define a list with the desired widths for each column.
39+
40+
```javascript
41+
const list_of_columns_width = [500, 110, 120, 130, 50, 60];
42+
```
43+
44+
2. Obtain a reference to the Grid instance.
45+
46+
```javascript
47+
let grid = $("#grid").data("kendoGrid");
48+
```
49+
50+
3. Iterate over the Grid columns and apply the widths from `list_of_columns_width`.
51+
52+
```javascript
53+
let gridColumns = grid.columns;
54+
55+
for (var i = 0; i < grid.columns.length; i++) {
56+
if (i < list_of_columns_width.length) {
57+
const any_column_width = list_of_columns_width[i];
58+
gridColumns[i].width = any_column_width;
59+
}
60+
}
61+
```
62+
63+
4. Update the Grid's options with the modified columns.
64+
65+
```javascript
66+
grid.setOptions({
67+
columns: gridColumns
68+
});
69+
```
70+
71+
Note: Use the `setOptions()` method with caution and avoid calling it inside event handlers like [`dataBound`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/databound) to prevent endless loops.
72+
73+
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.
74+
75+
Explore a live example in the following Dojo demo:
76+
77+
```dojo
78+
<div id="example">
79+
<div id="grid"></div>
80+
81+
<script>
82+
$(document).ready(function() {
83+
const list_of_columns_width = [500, 110, 120, 130 ,50, 60];
84+
$("#grid").kendoGrid({
85+
dataSource: {
86+
type: "odata",
87+
transport: {
88+
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
89+
},
90+
schema: {
91+
model: {
92+
fields: {
93+
OrderID: {
94+
type: "number"
95+
},
96+
ShipCountry: {
97+
type: "string"
98+
},
99+
ShipCity: {
100+
type: "string"
101+
},
102+
ShipName: {
103+
type: "string"
104+
},
105+
OrderDate: {
106+
type: "date"
107+
},
108+
ShippedDate: {
109+
type: "date"
110+
}
111+
}
112+
}
113+
},
114+
pageSize: 15
115+
},
116+
height: 550,
117+
sortable: true,
118+
resizable: true,
119+
pageable: true,
120+
dataBound: function() {
121+
for (var i = 0; i < this.columns.length; i++) {
122+
if (i < list_of_columns_width.length) {
123+
const any_column = this.columns[i];
124+
const any_column_width = list_of_columns_width[i];
125+
any_column.width = any_column_width
126+
}
127+
}
128+
},
129+
columns: [
130+
{
131+
field: "OrderDate",
132+
title: "Order Date",
133+
format: "{0:MM/dd/yyyy}"
134+
},
135+
{
136+
field: "ShipCountry",
137+
title: "Ship Country"
138+
},
139+
{
140+
field: "ShipCity",
141+
title: "Ship City"
142+
},
143+
{
144+
field: "ShipName",
145+
title: "Ship Name"
146+
},
147+
{
148+
field: "ShippedDate",
149+
title: "Shipped Date",
150+
format: "{0:MM/dd/yyyy}"
151+
},
152+
{
153+
field: "OrderID",
154+
title: "ID"
155+
}
156+
157+
]
158+
});
159+
160+
let grid = $("#grid").data("kendoGrid");
161+
let gridColumns = grid.columns;
162+
163+
for (var i = 0; i < grid.columns.length; i++) {
164+
if (i < list_of_columns_width.length) {
165+
166+
const any_column_width = list_of_columns_width[i];
167+
gridColumns[i].width = any_column_width;
168+
}
169+
}
170+
grid.setOptions({
171+
columns: gridColumns
172+
});
173+
});
174+
</script>
175+
</div>
176+
```
177+
178+
## See Also
179+
180+
- [Grid Overview](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid)
181+
- [Grid setOptions() Method](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/setoptions)
182+
- [Grid DataBound Event](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/databound)

‎src/kendo.pager.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -750,7 +750,7 @@ var __meta__ = {
750750

751751
_restoreTabIndexes: function() {
752752
this.element
753-
.find("[tabindex='-1']:not(.k-disabled)")
753+
.find("[tabindex='-1']:not(.k-disabled):not(.k-dropdownlist > .k-icon-button)")
754754
.attr("tabindex", 0);
755755
},
756756

@@ -909,20 +909,22 @@ var __meta__ = {
909909
},
910910

911911
_click: function(e) {
912-
var target = $(e.currentTarget);
912+
const that = this,
913+
target = $(e.currentTarget);
913914

914915
e.preventDefault();
915916

916-
if (this.options.navigatable) {
917-
if (target.attr("title") == this.options.messages.morePages) {
918-
this._focusMore = target.parent().index();
917+
if (that.options.navigatable) {
918+
if (target.attr("title") == that.options.messages.morePages) {
919+
that._focusMore = target.parent().index();
919920
} else if (!target.hasClass("k-pager-refresh") && !target.hasClass("k-pager-nav")) {
920-
this._focusSelected = true;
921+
that._focusSelected = true;
921922
}
923+
that._restoreTabIndexes();
922924
}
923925

924926
if (!target.is(".k-disabled")) {
925-
this.page(parseInt(target.attr(kendo.attr("page")), 10));
927+
that.page(parseInt(target.attr(kendo.attr("page")), 10));
926928
}
927929
},
928930

0 commit comments

Comments
 (0)