How to programmatically change a theme?

4 posts, 0 answers
  1. Ian
    Ian avatar
    51 posts
    Member since:
    Apr 2009

    Posted 20 Jan 2013 Link to this post

    I'm struggling to find any information on how to change/set one of the Kendo UI themes programatically.  I've seen some information on ThemeBuilder but I really want my own drop-down menu to trigger a theme change.

    If I have a menu item as follows, what do I need to put in the "onSelected" event to actually change the theme to that which has been selected?

            $("#menuImages").kendoMenu({
                dataSource: [
                    {
                        text: "",
                        imageUrl: "../../Content/images/languageMasterIcon.png",
                        items: [
                            { text: "English (en-GB)" },
                            { text: "English (en-US)" },
                            { text: "German (de-DE)" }
                        ]
                    },
                    {
                        text: "",
                        imageUrl: "../../Content/images/themeMasterIcon.png",
                        items: [
                            { text: "Default" },
                            { text: "Blue Opal" },
                            { text: "Bootstrap" },
                            { text: "Silver" },
                            { text: "Uniform" },
                            { text: "Metro" },
                            { text: "Black" },
                            { text: "Metro Black" },
                            { text: "High Contrast" },
                            { text: "Moonlight" }
                        ]
                    },
    ...  omitted for brevity ...
                select: onSelect
    });
    function onSelect(e) {
                // NEED TO KNOW WHAT GOES HERE TO CHANGE THE THEME TO THAT SELECTED       
    }

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    1824 posts
    Member since:
    Sep 2012

    Posted 22 Jan 2013 Link to this post

    Hi Ian,

    One of my colleagues created an example which demonstrates how to change the theme of Kendo UI widgets using a DropDownList (link to public post). For your scenario you can use the same approach, therefore I recommend you checking such thread and examining the source code.

    Regards,
    Iliana Nikolova
    the Telerik team

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

  3. Joe
    Joe avatar
    1 posts
    Member since:
    Nov 2012

    Posted 23 Jan 2013 Link to this post

    Iliana,

    Thanks for your response.  I am having the same issue as Ian.  The example you posted earlier, while functional, isn't very useful.  Sure, it changes the theme, but once the page is changed, the selected theme is lost.  How would I keep the theme persistent the entire time the user is accessing the application?

    Thanks

  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    1824 posts
    Member since:
    Sep 2012

    Posted 25 Jan 2013 Link to this post

    Hi Jonathan,

    The selection is lost if the page is changed, because all JavaScript variables are reset when the browser page is refreshed (this is default browser behavior and affects any JavaScript application). As a solution you can use any of the following:

    Please have in mind that web storage is not supported by the older browsers.

    Regards,
    Iliana Nikolova
    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