This is a migrated thread and some comments may be shown as answers.

Customize the column sorting arrow icons

1 Answer 10 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Maitri
Top achievements
Rank 1
Maitri asked on 18 Feb 2021, 07:59 AM
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.

1 Answer, 1 is accepted

Sort by
0
Accepted
Hetali
Telerik team
answered on 19 Feb 2021, 09:01 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Maitri
Top achievements
Rank 1
Answers by
Hetali
Telerik team
Share this question
or