Skip to content

Commit 021da8b

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent f934573 commit 021da8b

File tree

1 file changed

+182
-0
lines changed

1 file changed

+182
-0
lines changed

‎docs/knowledge-base/limit-sortable-columns-kendo-grid.md‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
---
2+
title: Limiting Sortable Columns in Kendo UI Grid
3+
description: Learn how to restrict the number of sortable columns in a Kendo UI Grid after reaching a specified limit.
4+
type: how-to
5+
page_title: How to Restrict Sortable Columns in a Kendo UI Grid
6+
slug: limit-sortable-columns-kendo-grid
7+
tags: kendo-ui, grid, sortable, columns, restriction
8+
res_type: kb
9+
ticketid: 1668366
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Sortable for Progress® Kendo UI®</td>
19+
</tr>
20+
<tr>
21+
<td>Version</td>
22+
<td>2021.2.616</td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
27+
## Description
28+
29+
When working with a Kendo UI Grid that contains multiple columns, a requirement might arise to limit the number of columns that can be sorted to a specific number, such as eight. After reaching this limit, the remaining columns should not offer the option to sort. This is particularly useful in scenarios involving dynamic columns where the specific columns to be sorted cannot be predetermined.
30+
31+
This KB article also answers the following questions:
32+
- How to dynamically control sortable columns in a Kendo UI Grid?
33+
- How to limit the number of columns that can be sorted in a Grid?
34+
- How to disable sorting on additional columns after reaching a sorting limit?
35+
36+
## Solution
37+
38+
To limit the number of sortable columns in a Kendo UI Grid, you can leverage the `sort` event of the Grid. In the event handler, check the number of columns currently sorted and disable sorting on all other columns if the limit is reached. Here's a step-by-step guide:
39+
40+
1. Subscribe to the Grid's `sort` event.
41+
42+
2. In the event handler, count the currently sorted columns.
43+
44+
3. If the number of sorted columns reaches the limit (e.g., three), prevent the sort event.
45+
46+
Here's an example implementation:
47+
48+
```javascript
49+
$("#grid").kendoGrid({
50+
// other Grid configurations
51+
sort:function(e){
52+
53+
if(sortedColumns.length === 3 && !sortedColumns.includes(e.sort.field)){
54+
e.preventDefault();
55+
} else {
56+
if(e.sort.dir === undefined){
57+
const index = sortedColumns.indexOf(e.sort.field);
58+
// only splice array when item is found
59+
sortedColumns.splice(index, 1);
60+
} else if (sortedColumns.indexOf(e.sort.field) === -1){
61+
62+
sortedColumns.push(e.sort.field);
63+
}
64+
}
65+
},
66+
});
67+
68+
```
69+
70+
Note: This solution assumes that your columns are defined with a `field` property, which is used to identify columns in the sorting array.
71+
72+
Below you will find a runnable example to try it out:
73+
74+
```dojo
75+
<div id="grid"></div>
76+
<script>
77+
$(document).ready(function () {
78+
var sortedColumns = [];
79+
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
80+
dataSource = new kendo.data.DataSource({
81+
transport: {
82+
read: {
83+
url: crudServiceBaseUrl + "/detailproducts",
84+
dataType: "jsonp"
85+
},
86+
update: {
87+
url: crudServiceBaseUrl + "/detailproducts/Update",
88+
dataType: "jsonp"
89+
},
90+
destroy: {
91+
url: crudServiceBaseUrl + "/detailproducts/Destroy",
92+
dataType: "jsonp"
93+
},
94+
parameterMap: function (options, operation) {
95+
if (operation !== "read" && options.models) {
96+
return { models: kendo.stringify(options.models) };
97+
}
98+
}
99+
},
100+
batch: true,
101+
pageSize: 20,
102+
autoSync: true,
103+
104+
schema: {
105+
model: {
106+
id: "ProductID",
107+
fields: {
108+
ProductID: { editable: false, nullable: true },
109+
Discontinued: { type: "boolean", editable: false },
110+
TotalSales: { type: "number", editable: false },
111+
TargetSales: { type: "number", editable: false },
112+
LastSupply: { type: "date" },
113+
UnitPrice: { type: "number" },
114+
UnitsInStock: { type: "number" },
115+
116+
}
117+
}
118+
}
119+
});
120+
121+
$("#grid").kendoGrid({
122+
dataSource: dataSource,
123+
height: 680,
124+
sort:function(e){
125+
126+
if(sortedColumns.length === 3 && !sortedColumns.includes(e.sort.field)){
127+
e.preventDefault();
128+
} else {
129+
if(e.sort.dir === undefined){
130+
const index = sortedColumns.indexOf(e.sort.field);
131+
// only splice array when item is found
132+
sortedColumns.splice(index, 1);
133+
} else if (sortedColumns.indexOf(e.sort.field) === -1){
134+
135+
sortedColumns.push(e.sort.field);
136+
137+
}
138+
}
139+
},
140+
pageable: true,
141+
sortable: {
142+
mode:"multiple"
143+
},
144+
145+
columns: [{
146+
field: "ProductName",
147+
title: "Product Name",
148+
width: 300
149+
}, {
150+
field: "UnitPrice",
151+
title: "Price",
152+
format: "{0:c}",
153+
width: 105
154+
}, {
155+
field: "Discontinued",
156+
title: "In Stock",
157+
width: 130,
158+
}, {
159+
field: "UnitsInStock",
160+
title: "Units",
161+
width: 105
162+
}, {
163+
field: "TotalSales",
164+
title: "Total Sales",
165+
format: "{0:c}",
166+
width: 140,
167+
}, {
168+
field: "TargetSales",
169+
title: "Target Sales",
170+
format: "{0:c}",
171+
width: 220
172+
}]
173+
});
174+
});
175+
</script>
176+
```
177+
178+
## See Also
179+
180+
- [Grid Sortable Configuration](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/sortable)
181+
- [Grid API Reference](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid)
182+
- [Grid Events Documentation](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/sort)

0 commit comments

Comments
 (0)