Change Grid Styling When Sorting is Applied

Environment

Description

How can I change the styles of the Kendo UI for Angular Grid columns and headers when sorting is applied?

Solution

To change the styles of the active Grid columns when sorting is applied:

1. Use the sortChange event of the Grid to update the SortDescriptor.

   Copy Code<kendo-grid>
       ...
       (sortChange)="onSortChange($event)"
       ...
   </kendo-grid>

   Copy Codepublic onSortChange(sortDesc: SortDescriptor[]): void {
       this.sortDescriptors = sortDesc;
   }

2. Use the class and headerClass properties of the ColumnComponent to conditionally apply a custom class if the columns field is present in the SortDescriptor.

   Copy Code<kendo-grid-column 
       field="ProductName" 
       title="Product Name" 
       [headerClass]="{'is-col-sorted': isColumnSorted('ProductName')}" 
       [class]="{'is-col-sorted': isColumnSorted('ProductName')}">
   </kendo-grid-column>

   Copy Codepublic isColumnSorted(colField: string): boolean {
       return this.sortDescriptors.some((col) => col.dir && col.field === colField);
   }

3. Use the custom class to apply the desired styles to the sorted columns.

   Copy Code.is-col-sorted {
       background-color: #FBEAEB!important;
       color: #2F3C7E;
   }

The following example demonstrates the suggested approach.

Suggested Links

• Styling the Grid Cells
• Styling the Grid Rows
• Styling the Grid Columns