This is a migrated thread and some comments may be shown as answers.

Custom colors for Alternate rows in grid

6 Answers 668 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Madzie
Top achievements
Rank 1
Madzie asked on 23 Dec 2014, 05:15 AM
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

6 Answers, 1 is accepted

Sort by
1
Dimo
Telerik team
answered on 23 Dec 2014, 09:37 AM
Hi Madzie,

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
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
0
Dimo
Telerik team
answered on 29 Dec 2014, 08:41 AM
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

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
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.
0
Madzie
Top achievements
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.
0
Dimo
Telerik team
answered on 29 Dec 2014, 05:02 PM
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

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.

Tags
Grid
Asked by
Madzie
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Madzie
Top achievements
Rank 1
Share this question
or