Setting a theme on individual controls

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

  3. Joshua
    Joshua avatar
    63 posts
    Member since:
    May 2012

    Posted 28 Apr in reply to Dimo Link to this post

    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.

  4. Dimo
    Admin
    Dimo avatar
    7497 posts
    Member since:
    Sep 2012

    Posted 29 Apr Link to this post

    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

     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     

  5. Joshua
    Joshua avatar
    63 posts
    Member since:
    May 2012

    Posted 29 Apr in reply to Dimo Link to this post

    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:

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

  6. Dimo
    Admin
    Dimo avatar
    7497 posts
    Member since:
    Sep 2012

    Posted 29 Apr Link to this post

    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

     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     

Back to Top