Sort Displayed Columns Menu Items
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Created with version | 2019.1.115 |
Description
My Grid has a column menu, which contains displayed columns submenu.
How can I sort the items of the displayed columns submenu?
- As of Kendo UI R3 2020 SP1(v2020.3.1021) the columns submenu can be sorted via the columnMenu.columns.sort configuration.
Solution
A possible solution is to sort the li elements of the column menu within the columnMenuInit event of the widget.
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#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" },
ShipName: { type: "string" },
ShipAddress: { type: "string" }
}
}
},
pageSize: 30,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
sortable: true,
filterable: true,
columnMenu: true,
pageable: true,
columns: [ {
field: "OrderID",
title: "Order ID",
width: 120
}, {
field: "ShipCountry",
title: "Ship Country"
}, {
field: "ShipName",
title: "Ship Name"
}, {
field: "ShipAddress",
filterable: false
}],
columnMenuInit:function(e){
var list= e.container.find('.k-columns-item ul')
var items = list.find('li');
items.each(function(x,y){
$(y).removeClass('k-first k-last')
})
items.sort(function(a,b){
a = $(a);
b = $(b);
var firstText = a.find('input[data-field]').attr('data-field');
var secondText = b.find('input[data-field]').attr('data-field');
return ((firstText < secondText) ? -1 : ((firstText > secondText) ? 1 : 0));
})
items.first().addClass('k-first');
items.last().addClass('k-last');
items.each(function(y,x){
list.append($(x));
})
}
});
});
</script>
</div>