|
| 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