Custom Themebuilder - how to change grid header colors

11 posts, 2 answers
  1. Ed
    Ed avatar
    168 posts
    Member since:
    Sep 2013

    Posted 21 Dec 2015 Link to this post

    In the custom themebuilder, what configuration items do I change to modify the grid header colors and font?

    If I were to override the CSS myself, which items would I need to change?

    Specifically, I want to use the bootstrap theme, but change the grid header background color to blue (typical bootstrap blue) and the text to white.

    Thanks,

    --Ed

  2. Answer
    Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    356 posts

    Posted 23 Dec 2015 Link to this post

    Hello Ed,

    You can achieve the desired layout by using the following CSS:

    .k-grid-header, .k-grid-header .k-header {
          background-color: #3175B0;
          color: white
    }

    Unfortunately, this can not be done through the ThemeBuilder, as the customizations made there affect many aspects of the styles of multiple widgets. There is no way to set the background and font colors of the Grid header only.

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Ed
    Ed avatar
    168 posts
    Member since:
    Sep 2013

    Posted 05 Jan Link to this post

    Now that I have the grid header in blue, how can I change the grid filter icon (k-icon k-filter) to be white instead of the standard black?

    Thanks,

    --Ed

  5. Answer
    Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    356 posts

    Posted 06 Jan Link to this post

    Hello Ed,

    The icons used across the Kendo UI Themes are coming from a background image sprite that contains multiple icons. Each icon is displayed, according to a specific background-position style.

    There are two options to achieve the desired behavior:

    - override the default background styles for the filter icon element:

    .k-grid .k-icon.k-filter {
      background: url('URL of your custom icon') no-repeat center center;
     }

    - edit the sprite with some image editing tool and replace the icon

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Ed
    Ed avatar
    168 posts
    Member since:
    Sep 2013

    Posted 06 Jan in reply to Dimiter Topalov Link to this post

    Hi Dimiter,

    For some reason, I was thinking there was a way to alter the color of the icon via CSS. What I did instead was to choose the Black themed sprite for this specific instance (k-filter) and that did the trick.

    Thanks,

    --Ed

  7. Igor
    Igor avatar
    11 posts
    Member since:
    Sep 2016

    Posted 01 Oct Link to this post

    A color of header text was not changed if a column could be filtered or sorted.So it seems .k-grid-header, .k-grid-header .k-header is not sufficient to get access to "filtered" or "sorted" columns header. Probably the header text is kind of link for them.What should I add to the style to change a column header text in this case? 
  8. Igor
    Igor avatar
    11 posts
    Member since:
    Sep 2016

    Posted 01 Oct Link to this post

    Adding .k-grid-header .k-header .k-link gave me access to header text for sorted and filtered columns. How can I apply these changes (change the default text and background-color) to the grid toolbar?
  9. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    356 posts

    Posted 04 Oct Link to this post

    Hi Igor,

    Changing the Grid toolbar's background and text color can be achieved via overwriting the following CSS rules:

    <style>
        .k-grid .k-header.k-grid-toolbar {
          background-color: red;
          color: white;       
        }
      </style>

    http://dojo.telerik.com/UPeBA

    If you want to do the same for the buttons inside the toolbar, they should be targeted separately:

    .k-grid .k-header.k-grid-toolbar .k-button {
          background-color: yellow;
          color: green
        }

    http://dojo.telerik.com/UPeBA/2

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  10. Igor
    Igor avatar
    11 posts
    Member since:
    Sep 2016

    Posted 06 Oct in reply to Dimiter Topalov Link to this post

    Hi Dimiter,

    Successfully applied your hints. It's working fine now. I have another question about grid toolbar usage.

    Let say I need to put into grid toolbar 2 buttons:
    1)      working like “create”, but having the different label/caption (e.g.”new”) instead of standard caption
    2)      not standard button having “specific” caption and JS function which should be invoked by click event.

    How can I do that?

    Best regards,
    Igor

     

     

  11. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    356 posts

    Posted 10 Oct Link to this post

    Hi Igor,

    You can use the Grid's toolbar.text option to specify custom text for the built-in command buttons (If not set the name option would be used as the button text instead.) 

    You can add a button with a custom name in the options, and attach a click handler to it, using the specified name that is reflected in one of the CSS classes, which is applied to the button - k-grid-name (e.g. if the name is "custom", the class would be k-grid-custom)This class can be used to obtain reference to the button after Grid initialization and attach click handlers.

    I have prepared a simple example, illustrating the described options:

    http://dojo.telerik.com/iLadi

    On a side note, for questions that are not related to the thread's original topic and scenario, please open a new thread. This will facilitate a tidier support history of your account and better support service. Thank you in advance.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  12. Igor
    Igor avatar
    11 posts
    Member since:
    Sep 2016

    Posted 10 Oct in reply to Dimiter Topalov Link to this post

    Hi Dimiter,

    Thank you very much for your hint and example about adding onclick trigger to the button of the toolbar. They allowed me implement the desired behavior. The only problem in my code, when I tried to apply your solution to my code, was a location of this binding. It did not work until I moved 

     $(".k-grid-custom").click(function(e){
             ...
             return false;
            });

    code to my function onDataBound() which is invoked when grid data are loaded:

    dataBound: onDataBound,

    Best regards,

    Igor

     

     

Back to Top
Kendo UI is VS 2017 Ready