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

Applying Theme Dynamically at the application level

1 Answer 163 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Prakash
Top achievements
Rank 1
Prakash asked on 19 Aug 2015, 02:41 PM

Dear Team,

We create Menu using Kendo UI and theme of Menu is changed dynamically using the following code.

 Now, we have added Radial Gauge to our Application. ​but when I change the theme, Menu theme is changing whereas Radial Gauge Theme is not changing.. ​

1. Please ​let me know how to change the theme of Radial Gauge ?

2. We are planning to apply theme for across ​our project, like ​Kendo UI Demo site. Please let me know the approach and if you can share me any example.

 

 

Theme Loading:

$(document).ready(function () {

    $("#Menu").kendoMenu();
   $("#ddlTheme").kendoDropDownList();

   var themeData = [
{ text: "Default", value: "kendo.default.min.css" },
{ text: "Bootstrap", value: "kendo.bootstrap.min" },
{ text: "Black", value: "kendo.black.min" },
{ text: "Blue Opal", value: "kendo.blueopal.min" },
{ text: "Fiori", value: "kendo.fiori.min" },
{ text: "Flat", value: "kendo.flat.min" },
{ text: "High Constrast", value: "kendo.highcontrast.min" },
{ text: "Material Light", value: "kendo.material.min" },
{ text: "Material Black", value: "kendo.materialblack.min" },
{ text: "Metro Light", value: "kendo.metro.min" },
{ text: "Metro Black", value: "kendo.metroblack.min" },
{ text: "Moon Light", value: "kendo.moonlight.min" },
{ text: "Office", value: "kendo.office365.min" }
];
$("#ddlThemes").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: themeData,
index: 0,
change: applyTheme
});
          

Changing Theme:

function applyTheme() {
     var theme = $("#ddlThemes").val();
     var css = $('link[href^="../../Kendo/styles/"]')[1]; //get my css anchor
    if (theme != null) {
            css.href = '../../Kendo/styles/' + theme + '.css';

    //Changing Radial Gauge:
     var guage = $("#gauge1").data("kendoRadialGauge");
     var options = guage._originalOptions;
     options.theme = "moonlight";
     guage.destroy();
     $("#gauge1").kendoRadialGauge(options);
}
};
});

 

Thanks,

Prakash.

1 Answer, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 21 Aug 2015, 11:29 AM
Hi Prakash,

Please check this forum thread which discusses the same topic.

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
General Discussions
Asked by
Prakash
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Share this question
or