Theme chooser

by LeeMellinger

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<input class="themeChooser" value="default" />

<div id="tree"></div>

<p>Note: in order for the whole page to be styled, the &lt;body&gt; element has a <code>k-content</code> class.</p>

CSS

html,body {
    margin: 0;
    padding: 0;    
}

body {
    font: 12px/1.5 Tahoma,sans-serif;
    padding: 2em;
}

span.themeChooser {
    float: right;
}

#tree {
    height: 9em;
}

JavaScript

// theme chooser drop-down
$(".themeChooser").kendoDropDownList({
    dataSource: [
        { text: "Black", value: "black" },
        { text: "Blue Opal", value: "blueopal" },
        { text: "Default", value: "default" },
        { text: "Metro", value: "metro" },
        { text: "Silver", value: "silver" }
    ],
    change: function (e) {
        var theme = (this.value() || "default").toLowerCase();
        
        changeTheme(theme);
    }
});

// sample widget on the page
$("#tree").kendoTreeView({
    dataSource: [
        { text: "foo", expanded: true, items: [
            { text: "bar", selected: true }
          ]
        },
        { text: "baz" }
    ]
});

// loads new stylesheet
function changeTheme(skinName, animate) {
    var doc = document,
        kendoLinks = $("link[href*='kendo.']", doc.getElementsByTagName("head")[0]),
        commonLink = kendoLinks.filter("[href*='kendo.common']"),
        skinLink = kendoLinks.filter(":not([href*='kendo.common'])"),
        href = location.href,
        skinRegex = /kendo\.\w+(\.min)?\.css/i,
        extension = skinLink.attr("rel") === "stylesheet" ? ".css" : ".less",
        url = commonLink.attr("href").replace(skinRegex, "kendo." + skinName + "$1" + extension),
        exampleElement = $("#example");
    
    function preloadStylesheet(file, callback) {
        var element = $("<link rel='stylesheet' media='print' href='" + file + "'").appendTo("head");
        
        setTimeout(function () {
            callback();
            element.remove();
        }, 100);
    }

    function replaceTheme() {
        var oldSkinName = $(doc).data("kendoSkin"),
            newLink;

        if ($.browser.msie) {
            newLink = doc.createStyleSheet(url);
        } else {
            newLink = skinLink.eq(0).clone().attr("href", url);
        }

        newLink.insertBefore(skinLink[0]);
        skinLink.remove();

        $(doc.documentElement).removeClass("k-" + oldSkinName).addClass("k-" + skinName);
...