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

Header Style

1 Answer 74 Views
MultiColumnComboBox
This is a migrated thread and some comments may be shown as answers.
SSirica
Top achievements
Rank 2
Veteran
Iron
SSirica asked on 22 Jan 2019, 07:32 PM
How can I cange the style of the Column Headers?  I would like the font to be bold or maybe the background a different color.  I tried changing .rcbHeader but that didn't do it

1 Answer, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 23 Jan 2019, 10:05 AM
Hello SSirica,

The Column headers can be modified by using the following styles: 

<style>
    .k-dropdowngrid-popup .k-grid-header th.k-header {
       font-weight: bold;
       background-color: yellowgreen;
       color: beige;
    }
</style>

For further customization, you can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post. 

In this case, as the dropdown auto-collapses, you can prevent the closing via the following client-side event handler or follow the approach in Inspect Auto-Hiding Tooltips and Elements.

<ClientEvents OnClose="preventClose" />

<script>
    function preventClose(sender, args) {
        args.set_cancel(true);
    }
</script>

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

Regards,
Peter Milchev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
MultiColumnComboBox
Asked by
SSirica
Top achievements
Rank 2
Veteran
Iron
Answers by
Peter Milchev
Telerik team
Share this question
or