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.