Custom Themebuilder - how to change grid header colors

[Ed]

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

[Dimiter Topalov]

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

 

 

[Ed]

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

[Dimiter Topalov]

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

 

 

[Ed]

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

[Igor]

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? 

[Igor]

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?

[Dimiter Topalov]

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

[Igor]

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

 

 

[Dimiter Topalov]

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

[Igor]

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