How can I change the header color of just one grid ?

3 posts, 0 answers
  1. Pat
    Pat avatar
    58 posts
    Member since:
    Feb 2005

    Posted 14 Dec 2012 Link to this post

    I have a page with a grid and beneath it, a tab.  I want to change the header column colors.

    That grid is declared within a td at the top of the page.  I declared a style within that td, setting .k-header to my new color and that grid does reflect that new color.

    But now everything else below, even outside that td, also now has the new color, even the tab.  When I open the modal window on that page, even the window is now using the new color.

    I thought styles changes were local to the element they are in?  If so, then why is this happening?  If not, then what is the correct way to target a specific color to one specific grid?
  2. Dimo
    Admin
    Dimo avatar
    8454 posts

    Posted 18 Dec 2012 Link to this post

    Hi Pat,

    Some fundamental information about the Kendo UI widgets' styling is available at:

    http://docs.kendoui.com/getting-started/web/appearance-styling

    The article shows how to apply styling to a specific widget type, e.g. all Grids, all Menus, etc. In order to apply styling to a specific widget instance, you need to use the widget's ID or a custom class in the CSS selector, for example:

    #MyGridID .k-grid-header .k-header
    {
           background-color: red;
    }

    The k-grid-header class ensures that the custom styles are applied only to Grid header cells and not to other elements inside the Grid, which have the k-header class.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Pat
    Pat avatar
    58 posts
    Member since:
    Feb 2005

    Posted 18 Dec 2012 Link to this post

    Thanks, that worked.
Back to Top