Customize the column sorting arrow icons

[Maitri]

I want to show an icon in all columns' headers when grid is in default state (No sorting applied) to let user know the columns are sortable and also want to customize the up and down arrow icons when sorting is applied.

[Hetali]

Hello Maitri,

Grid header default state icon

In order to show an icon in the Kendo UI Grid Column Header when there is no sorting applied, use the kendoGridHeaderTemplate as seen below:

 <kendo-grid-column field="ProductName" title="Product Name">
  <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
    {{ column.title }}
    <span *ngIf="sort[0].field == '' || sort[0].dir == null || sort[0].field !== column.field" >
      <span class="k-icon k-i-unsort"></span>
    </span>
  </ng-template>
</kendo-grid-column>

Replace Grid header sort icons

To replace the asc and desc sort icons, hide the built-in icons and use the Grid header template to add the desired icons. For example:

.k-cell-inner > .k-link > .k-icon.k-i-sort-desc-sm,
.k-cell-inner > .k-link > .k-icon.k-i-sort-asc-sm {
  display: none;
}

<kendo-grid-column field="ProductName" title="Product Name">
  <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
    {{ column.title }}
    <span *ngIf="sort[0].field === column.field">
      <span *ngIf="sort[0].dir === 'asc'" class="k-icon k-i-sort-asc"></span>
      <span *ngIf="sort[0].dir === 'desc'" class="k-icon k-i-sort-desc"></span>
    </span>
  </ng-template>
</kendo-grid-column>

 

Demonstration & Conclusion

In this StackBlitz example, I have replaced the built-in sort icons and added an unsort icon in the Kendo UI Grid Header. Please make sure to set the encapsulation to ViewEncapsulation.None to set the built-in icons' style locally.

I hope this helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik

[Sami]

Is this still the proper of adding the unsort icon? I find it a bit hacky, I wish there was a built in support for it.

[Georgi]

Hi Sami, 

As of now, the Grid component does not provide such a built-in property that would allow the developer to add the unsort icon. For this reason, utilizing the HeaderTemplateDirective with the suggested code snippet remains a valid approach for achieving the desired functionality. 

When it comes to modifying the default icons indicating the direction in which the Grid has been sorted, an alternative approach would be to use our built-in ICON_SETTINGS token. For further reference for this approach, I would suggest checking out our Icon Settings article: 

https://www.telerik.com/kendo-angular-ui/components/icons/icon-settings/

For your convenience, I am also sending you a StackBlitz demo that demonstrates this approach: 

https://stackblitz.com/edit/angular-7ykwot?file=src%2Fapp%2Fapp.component.ts

I hope this helps. Let me know if I can further assist you with this case. 

Regards,

Georgi

Progress Telerik

[John]

How can this be accomplished for UI for ASP.NET Core?   The CSS to hide the built in icons works fine but I'm not sure how to set the custom icon in the grid header template.