New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Customizing the Grid Column Sorting Icons


Product Telerik UI for ASP.NET MVC Grid
Progress Telerik UI for ASP.NET MVC version Created with the 2023.3.1010 version


How can I change the default sorting icons of the Grid columns?


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:

  1. 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;
  1. Handle the DataBound event of the Grid that triggers each time a specified column is sorted (the sorting data operation is performed on the server (ServerOperation(true)).
    .Sortable(sortable => sortable
    .Events(ev => ev.DataBound("onDataBound"))
    // other grid configuration
  1. Within the DataBound event handler, define the desired SVG icons as explained in the SVG Icons section in the documentation. Then, access the currently sorted fields through the sort() method of the DataSource and append the respective icon (ascending or descending).
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".

For a runnable example based on the code above, refer to the REPL example on customizing the default sorting icons of the Grid columns.

More ASP.NET MVC Grid Resources

See Also

In this article