Custom colors for Alternate rows in grid

7 posts, 0 answers
  1. Madzie
    Madzie avatar
    65 posts
    Member since:
    Apr 2012

    Posted 22 Dec 2014 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 23 Dec 2014 Link to this post

    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.

     
  3. Madzie
    Madzie avatar
    65 posts
    Member since:
    Apr 2012

    Posted 26 Dec 2014 in reply to Dimo Link to this post

    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
  4. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 29 Dec 2014 Link to this post

    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.

  5. Madzie
    Madzie avatar
    65 posts
    Member since:
    Apr 2012

    Posted 29 Dec 2014 in reply to Dimo Link to this post

    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.
  6. Madzie
    Madzie avatar
    65 posts
    Member since:
    Apr 2012

    Posted 29 Dec 2014 in reply to Dimo Link to this post

    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.
  7. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 29 Dec 2014 Link to this post

    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.

Back to Top