Change Grid Styling When Sorting is Applied

Environment

Product

Progress® Kendo UI for Angular Grid

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.

   html

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

   typescript

   public 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.

   html

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

   typescript

   public 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.

   css

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

The following example demonstrates the suggested approach.

Change Theme

Theme

Loading ...

Suggested Links

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