Setting a theme on individual controls

2 posts, 0 answers
  1. Tom
    Tom avatar
    1 posts
    Member since:
    Jan 2013

    Posted 02 Feb 2013 Link to this post

    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:

    $("#Grid").kendoGrid({
        magicalThemePropertyThatDoesntExist: default;

    Thanks,
    -tom

  2. Dimo
    Admin
    Dimo avatar
    7186 posts
    Member since:
    Sep 2012

    Posted 05 Feb 2013 Link to this post

    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:

    <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!

Back to Top