Posted 05 Feb 2013
Link to this post
The Kendo UI widgets do not have a property that defines their theme name, so they normally support only one theme on the page.
In order to achieve the desired look, you should follow the steps described below.
1. Place the Grid (or any other widget that you want styled differently) inside a container with some custom class, for example:
<!-- Kendo UI widgets with a Default theme applied -->
2. Register and modify the kendo.default.css file by prepending a custom class to every
.kendodefault .k-dropdown .k-input
/* Default theme styles */
All DateTimePicker / ComboBox / DropDownList popups are placed inside a <div class="k-animation-container">, which is a child of the <body> element. Use the widgets' open
event to locate this container and add the custom class.
The Kendo UI Window element is styled itself, so the custom class should be set to its parent element, but there is no suitable one. That's why the Windows will always apply the "main" theme styles, i.e. the one that you have not modified. Well, you can override them, of course.
Due to the complexity and infeasibility of point (3), I usually advise people to reconsider their requirements and use only one theme, possibly with only overriding specific styles
instead of registering a whole new theme.
After all explanations above, a reasonable question may arise, namely, why we don't support all this out-of-the-box. There are two main reasons:
1. Although the implementation is easy, it will cause a considerable increase in the CSS files' size and complexity.
2. Using multiple themes on a single page is rare. Most developers will not benefit from this feature, but on the contrary.
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI