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

Custom Themebuilder - how to change grid header colors

10 Answers 722 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Ed
Top achievements
Rank 1
Ed asked on 21 Dec 2015, 06:18 PM

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

10 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Topalov
Telerik team
answered on 23 Dec 2015, 03:45 PM
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!
 
0
Ed
Top achievements
Rank 1
answered on 05 Jan 2016, 06:15 PM

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

0
Accepted
Dimiter Topalov
Telerik team
answered on 06 Jan 2016, 11:51 AM
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!
 
0
Ed
Top achievements
Rank 1
answered on 06 Jan 2016, 05:47 PM

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

0
Igor
Top achievements
Rank 1
answered on 01 Oct 2016, 03:14 PM
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? 
0
Igor
Top achievements
Rank 1
answered on 01 Oct 2016, 03:28 PM
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?
0
Dimiter Topalov
Telerik team
answered on 04 Oct 2016, 01:33 PM
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.
0
Igor
Top achievements
Rank 1
answered on 06 Oct 2016, 08:04 AM

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

 

 

0
Dimiter Topalov
Telerik team
answered on 10 Oct 2016, 05:38 AM
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.
0
Igor
Top achievements
Rank 1
answered on 10 Oct 2016, 02:22 PM

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

 

 

Tags
General Discussions
Asked by
Ed
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Ed
Top achievements
Rank 1
Igor
Top achievements
Rank 1
Share this question
or