Customizing the Grid Column Sorting Icons
Environment
| Product | Telerik UI for ASP.NET Core Grid |
| Progress Telerik UI for ASP.NET Core version | Created with the 2023.3.1010 version |
Description
How can I change the default sorting icons of the Grid columns?
Solution
To set custom ascending and descending sorting icons when a specified Grid column is sorted and display a double arrow icon when the column is not sorted, follow these steps:
- Add the following CSS style to hide the default sorting icons:
#grid .k-grid-header .k-cell-inner .k-link .k-sort-icon {
display: none;
}
- Handle the
DataBoundevent of the Grid that triggers each time a specified column is sorted (the sorting data operation is performed on the server (ServerOperation(true)).
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("grid")
.Sortable(sortable => sortable
.AllowUnsort(true)
.SortMode(GridSortMode.Mixed)
.ShowIndexes(true))
.Events(ev => ev.DataBound("onDataBound"))
// other grid configuration
)
@addTagHelper *, Kendo.Mvc
<kendo-grid name="grid" on-data-bound="onDataBound">
<sortable enabled="true" allow-unsort="true" mode="mixed" show-indexes="true" />
<!-- Other configuration -->
</kendo-grid>
- Within the
DataBoundevent handler, define the desired SVG icons as explained in the SVG Icons section in the documentation. Then, access the currently sorted fields through thesort()method of the DataSource and append the respective icon (ascending or descending).
<script>
function onDataBound(e) {
let grid = this;
let sorts = grid.dataSource.sort(); // Get the currently sorted fields.
var nonSortableIcon = kendo.ui.icon({ icon: 'caret-alt-expand', type: 'svg' }); // Specify the desired SVG icon for the non-sorted columns.
var descSortIcon = kendo.ui.icon({ icon: 'caret-alt-down', type: 'svg' }); // Specify the desired SVG icon for descending order.
var ascSortIcon = kendo.ui.icon({ icon: 'caret-alt-up', type: 'svg' }); // Specify the desired SVG icon for ascending order.
if(sorts == undefined) { // Check if the Grid is sorted initially.
grid.thead.find("th .k-cell-inner .k-link").each(function(){ // Loop through the Grid column headers.
$(this).append(nonSortableIcon); // Add the "nonSortableIcon " icon on all column headers.
});
} else {
// Reset the sort icons.
grid.thead.find("th .k-cell-inner .k-link").each(function(){
if($(this).find("span.k-svg-i-caret-alt-expand").length == 0) {
$(this).find("span.k-icon").remove(); // Remove the "descSortIcon"/"ascSortIcon" icon.
$(this).append(nonSortableIcon); // Add the default icon.
}
});
$.each(sorts, function(i,value) { // Loop through the sorted fields.
let colHeader = grid.thead.find(`th[data-field='${value.field}']`); // Get the column header of the sorted column.
if(colHeader) {
colHeader.find(".k-link span.k-icon").remove(); // Remove the default icon.
if(value.dir == "asc") {
colHeader.find(".k-link").append(ascSortIcon); //Append the custom "ascSortIcon".
}
if(value.dir == "desc") {
colHeader.find(".k-link").append(descSortIcon); //Append the custom "descSortIcon".
}
}
});
}
}
</script>
For a runnable example based on the code above, refer to the following REPL samples: