Sorting Customization in Angular Grid Component

18 Nov 20181 minute to read

The appearance of the sorting icons and multi sorting icons in the Angular Data Grid component can be customized using CSS. Available Syncfusion® icons can be used based on the active theme.

Customize the Grid sorting icon

The .e-icon-ascending::before and .e-icon-descending::before classes are used to style the sorting icons for ascending and descending order.

.e-grid .e-icon-ascending::before {
    content: '\e7a3'; /* Icon code for ascending order */
}
.e-grid .e-icon-descending::before {
    content: '\e7b6'; /* Icon code for descending order */
}

Grid sorting icon

Customize the Grid multi sorting icon

The .e-sortnumber class is used to style the multi sorting icon.

.e-grid .e-sortnumber {
    background-color: #deecf9;
    font-family: cursive;
}

Grid multi sorting icon