Hi. This has got to be very simple but it's driving me nuts. Setting the theme of the Kendo controls is quite simple by adding the corresponding CSS to the page (links in head), and I've messed around with the theme selector to change the theme at runtime (works great), but what if I want to set the theme of a specific control without affecting the rest of the controls? E.G.: What if I'd like the general theme to be "black", setting that in the BundleConfig of the MVC app, but I want the grid on a specific page to be "default" without affecting the other controls such as the menu.
Is there a way to set the theme for a specific control? IE:
Thanks,
-tom
Is there a way to set the theme for a specific control? IE:
$("#Grid").kendoGrid({ magicalThemePropertyThatDoesntExist: default;Thanks,
-tom
7 Answers, 1 is accepted
0
Hello Tom,
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:
2. Register and modify the kendo.default.css file by prepending a custom class to every CSS selector:
3. The above approach will work for all widgets inside a container with the specified custom class, except for (parts of) widgets that are normally placed directly in the <body>, such as the Window, Date / Time Pickers' popups, ComboBox / DropDownList dropdowns, etc. For those you need to add the custom CSS class to the appropriate element with Javascript after the widget has been initialized.
http://demos.kendoui.com/web/combobox/events.html
http://demos.kendoui.com/web/datepicker/events.html
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.
Regards,
Dimo
the Telerik team
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:
<div class="kendodefault"> <!-- Kendo UI widgets with a Default theme applied --></div>2. Register and modify the kendo.default.css file by prepending a custom class to every CSS selector:
.kendodefault .k-block,.kendodefault .k-widget,.kendodefault .k-popup,.kendodefault .k-content,.kendodefault .k-dropdown .k-input{ /* Default theme styles */}3. The above approach will work for all widgets inside a container with the specified custom class, except for (parts of) widgets that are normally placed directly in the <body>, such as the Window, Date / Time Pickers' popups, ComboBox / DropDownList dropdowns, etc. For those you need to add the custom CSS class to the appropriate element with Javascript after the widget has been initialized.
http://demos.kendoui.com/web/combobox/events.html
http://demos.kendoui.com/web/datepicker/events.html
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.
function onComboBoxOpen() { this.list.addClass("kendodefault");}function onDateTimePickerOpen(e) { var thisObj = this; if (e.view == "date") { window.setTimeout(function(){ thisObj.dateView.popup.element.parent().addClass("kendodefault"); }, 1); } else { window.setTimeout(function(){ thisObj.timeView.popup.element.parent().addClass("kendodefault"); }, 1); }}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.
Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Joshua
Top achievements
Rank 2
Iron
Veteran
Iron
Rank 2
Iron
Veteran
Iron
answered on 28 Apr 2014, 05:56 PM
This problem seems to show up for so many people on the forums. I do not know why a non-javascript solution does not exist yet.
Could we just add an option to the markup for an animation container class name? the you guys could add that to your container that is injected directly into the body?
It is painful to create a js handler for every thing that has a drop down and one cannot successfully use the kendo classes, because you guys change the names quite often from release to release.
Could we just add an option to the markup for an animation container class name? the you guys could add that to your container that is injected directly into the body?
It is painful to create a js handler for every thing that has a drop down and one cannot successfully use the kendo classes, because you guys change the names quite often from release to release.
0
Hi Joshua,
Questions about multi-theme support come up from time to time, but the demand has not been sufficient to justify the development time for such a feature and the negative impact this will have on the majority of developers that don't need it. Sorry about that.
We do not change CSS class names across releases, I am not sure I understood that.
In case you are using multiple themes on the same page because you think the styling of the widgets is inconsistent or there are some other design-related issues, please share your thoughts and I will forward them to our designers for further consideration.
You can also create a request and vote for multi-theme support at
http://kendoui-feedback.telerik.com/
(if I am not mistaken, there is no such request currently logged)
Regards,
Dimo
Telerik
Questions about multi-theme support come up from time to time, but the demand has not been sufficient to justify the development time for such a feature and the negative impact this will have on the majority of developers that don't need it. Sorry about that.
We do not change CSS class names across releases, I am not sure I understood that.
In case you are using multiple themes on the same page because you think the styling of the widgets is inconsistent or there are some other design-related issues, please share your thoughts and I will forward them to our designers for further consideration.
You can also create a request and vote for multi-theme support at
http://kendoui-feedback.telerik.com/
(if I am not mistaken, there is no such request currently logged)
Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Joshua
Top achievements
Rank 2
Iron
Veteran
Iron
Rank 2
Iron
Veteran
Iron
answered on 29 Apr 2014, 12:51 PM
I am sorry for communicating incorrectly. My reply was not in regard to themes, but in regard to adding a class to the popup container.
I feel that adding the class via js is painfully horrible to have to recode over and over. I feel that having a way to add a class to popups that get injected into the body would be so much easier.
This is bad:
this is good:
I feel that adding the class via js is painfully horrible to have to recode over and over. I feel that having a way to add a class to popups that get injected into the body would be so much easier.
This is bad:
<div id='container'> <span data-bind='text:valor'></span> <select data-role='dropdownlist' data-bind='source:ds,events:{open:onOpen}'></select></div><script> var $container = $('#container'); var vm = new kendo.observable({ ds: [1, 2, 3, 4], onOpen: function (e) { e.sender.popup.element.addClass('mySpecialClass'); } });</script>this is good:
<div id='container'> <span data-bind='text:valor'></span> <select data-role='dropdownlist' data-animation-container-class='mySpecialClass' data-bind='source:ds'></select></div><script> var $container = $('#container'); var vm = new kendo.observable({ ds: [1, 2, 3, 4] });</script>0
Hello Joshua,
Since you have submitted a related support ticket on this topic (which is not strictly related to the thread's original idea), we will continue the discussion there.
Regards,
Dimo
Telerik
Since you have submitted a related support ticket on this topic (which is not strictly related to the thread's original idea), we will continue the discussion there.
Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
kako
Top achievements
Rank 1
Rank 1
answered on 29 May 2018, 02:30 AM
By this discussion, what happened in the end?
I am still aware that it is the only way to add classes through js (as Joshua indicates), is it right?
If you have a way to easily add classes to popups, please let me know.
0
Hello Kako,
You are correct, this is the only way to add classes through JS. If you have any other questions, do not hesitate to write back.
Regards,
Preslav
Progress Telerik
You are correct, this is the only way to add classes through JS. If you have any other questions, do not hesitate to write back.
Regards,
Preslav
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.