Add Background Color to Sorted Grid Columns by Using LESS Themes
Environment
| Product | Progress® Kendo UI® for jQuery |
Description
How can I add a background color to the sorted columns of the Grid by using the LESS themes?
Solution
To achieve the desired scenario:
- Change the default background of the alternate row to an RGBA color format with a low opaque level.
- Add the background color to the
.k-sortedclass by using the RGBA color format.
- The
.k-sortedclass is available as of the Kendo UI 2017 R2 SP1 release.- If you do not override the
k-altclass, the background color of the.k-sortedclass will not apply.
The following examples demonstrate how to change the background color of selected rows in a Grid when working with:
Dark Themes
When your project uses a dark theme, use light colors for the background of the selected rows.
The following example demonstrates how to apply the suggested background colors to the selected Grid rows if your project uses the Black or Material Black theme.
.k-grid .k-alt {
background-color: rgba(255, 255, 255, 0.04);
}
col.k-sorted, th.k-sorted {
background-color: rgba(255, 255, 255, 0.2);
}
.k-grid .k-alt {
background-color: rgba(255, 255, 255, 0);
}
col.k-sorted, th.k-sorted {
background-color: rgba(255, 255, 255, 0.1);
}
Light Themes
When your project uses a light theme, use dark colors for the background of the selected rows.
The following example demonstrates how to apply the suggested background colors to the selected Grid rows if your project uses the Default or Material theme.
.k-grid .k-alt {
background-color: rgba(0, 0, 0, 0.06);
}
col.k-sorted, th.k-sorted {
background-color: rgba(0, 0, 0, 0.1);
}
.k-grid .k-alt {
background-color: rgba(0, 0, 0, 0);
}
col.k-sorted, th.k-sorted {
background-color: rgba(0, 0, 0, 0.1);
}