I am using Razor to define the Telerik grid.
By default one of the color is 'transparent' and the other can be defined as I understand. Is there a way to define two custom colors like - instead of transparent - it is white and the other color gray ?
Thanks in advance
By default one of the color is 'transparent' and the other can be defined as I understand. Is there a way to define two custom colors like - instead of transparent - it is white and the other color gray ?
Thanks in advance
6 Answers, 1 is accepted
1
Hi Madzie,
Yes, you can define custom colors for both types of Grid rows. The selectors should be:
Keep in mind that using custom row backgrounds can override the Grid's selected row styles. In this case you will need to re-apply them with a higher CSS specificity.
Regards,
Dimo
Telerik
Yes, you can define custom colors for both types of Grid rows. The selectors should be:
.k-grid tbody > tr{}.k-grid tbody > .k-alt{}Keep in mind that using custom row backgrounds can override the Grid's selected row styles. In this case you will need to re-apply them with a higher CSS specificity.
.k-grid tbody > tr.k-state-selected{ }Regards,
Dimo
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
Madzie
Top achievements
Rank 1
Rank 1
answered on 26 Dec 2014, 09:25 PM
Thanks for this. But doing this also changed the color of column Headers
I used a combo of red and yellow (just to test). The red appears in header
I used a combo of red and yellow (just to test). The red appears in header
0
Hi Madzie,
The column headers' table row is a child of a <thead> element, so the provided CSS rule should not affect it (check the screenshot). Did you change the CSS selectors in any way? In case you have nested tables (hierarchy) and semi-transparent backgrounds, you may need to tweak the background styles of the nested headers, so that they are completely opaque.
Regards,
Dimo
Telerik
The column headers' table row is a child of a <thead> element, so the provided CSS rule should not affect it (check the screenshot). Did you change the CSS selectors in any way? In case you have nested tables (hierarchy) and semi-transparent backgrounds, you may need to tweak the background styles of the nested headers, so that they are completely opaque.
Regards,
Dimo
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
Madzie
Top achievements
Rank 1
Rank 1
answered on 29 Dec 2014, 04:22 PM
Is .k-grid tbody > tr different from .t-grid tbody > tr ??
I am using .t-grid tbody > tr here and also yes, one of the grid has hierarchy but it shouldn't affect non-hierarchical grids right ! Will check again.
I am using .t-grid tbody > tr here and also yes, one of the grid has hierarchy but it shouldn't affect non-hierarchical grids right ! Will check again.
0
Madzie
Top achievements
Rank 1
Rank 1
answered on 29 Dec 2014, 04:23 PM
Is .t-grid tbody > tr different from .k-grid tbody > tr ?
I am using the former one, and also some grids have the hierarchy but I believe the change shouldn't impact the non-hierarchical grids..right ?
Will check again.
I am using the former one, and also some grids have the hierarchy but I believe the change shouldn't impact the non-hierarchical grids..right ?
Will check again.
0
Hello Madzie,
.t-grid is a CSS class used by the Grid from the Telerik MVC Extensions. This product entered an officially announced maintetance-only phase in 2012 and was discontinued in 2013. We no longer provide technical support for it.
.k-grid is a CSS class used by the Kendo UI Grid.
Regards,
Dimo
Telerik
.t-grid is a CSS class used by the Grid from the Telerik MVC Extensions. This product entered an officially announced maintetance-only phase in 2012 and was discontinued in 2013. We no longer provide technical support for it.
.k-grid is a CSS class used by the Kendo UI Grid.
Regards,
Dimo
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.