This is a migrated thread and some comments may be shown as answers.

How to programmatically change a theme?

4 Answers 956 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Ian
Top achievements
Rank 1
Ian asked on 21 Jan 2013, 12:37 AM
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       
}

4 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 22 Jan 2013, 06:54 PM
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!
0
Joe
Top achievements
Rank 1
answered on 23 Jan 2013, 04:12 PM
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
0
Iliana Nikolova
Telerik team
answered on 25 Jan 2013, 02:44 PM
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!
0
alessandro
Top achievements
Rank 1
answered on 30 Jun 2015, 07:28 PM

Hi, i did it with javascript, storing on browser, as below:

My html file

<link href="/assets/Content/KendoUi/kendo.common.min.css" rel="stylesheet"/>
<link href="/assets/Content/KendoUi/kendo.bootstrap.min.css" rel="stylesheet"/>
 
<select style="width: 120px;" id="ddlTema">
                        <option value="kendo.bootstrap.min">Bootstrap</option>
                        <option value="kendo.black.min">Black</option>
                        <option value="kendo.blueopal.min">BlackOpal</option>
                        <option value="kendo.fiori.min">Fiori</option>
                        <option value="kendo.flat.min">Flat</option>
                        <option value="kendo.highcontrast.min">High Constrast</option>
                        <option value="kendo.material.min">Material Light</option>
                        <option value="kendo.materialblack.min">Material Black</option>
                        <option value="kendo.metro.min">Metro Light</option>
                        <option value="kendo.metroblack.min">Metro Black</option>
                        <option value="kendo.moonlight.min">Moonlight</option>
                        <option value="kendo.office365.min">Office</option>
                    </select>
  
<script src="/assets/Scripts/jquery-2.1.3.js"></script>
<script src="/assets/Scripts/KendoUi/kendo.all.min.js"></script>
<script src="/assets/Scripts/custom.js"></script>


After that, i have my js code on 'custom.js' file, as below:

 

var theme = {
 
    changeTheme : function () {
        var selected = this.value;
        localStorage.setItem("theme-kendo", selected);
        window.location.reload();
    },
 
    loadTheme : function() {
        var theme = localStorage.getItem("theme-kendo");
        var css = $('link[href^="/assets/Content/KendoUi/"]')[1];  //get my css anchor
        css.href = '/assets/Content/KendoUi/' + theme + '.css';
    }
};
 
 
$(function () {
    theme.loadTheme();
    $('#ddlTema').on('change', theme.changeTheme);
});

 

Tags
General Discussions
Asked by
Ian
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Joe
Top achievements
Rank 1
alessandro
Top achievements
Rank 1
Share this question
or