CODEWITHSUNDEEP
javascripthtmljquerykendo-ui
ponga
ponga

Reputation: 15

Dropdown value change style of pages dynamically

I am building a muti-page website with Kendo UI for Jquery. I have a dropdown to select the style the user want. For now I can change the style, but it doesn't stick; as soon as I refresh the page it goes back to the default style. I want the style to also change for all the other pages.

Here is my code:
HTML

<html>
<head>
    <link rel="stylesheet" href="css/kendo.common.min.css">
    <link rel="stylesheet" href="css/kendo.default.min.css"/>
    <script src="script/jquery.min.js"></script>
    <script src="script/kendo.all.min.js"></script>
</head>
<body  class="k-content">
<label for="theme">Theme:</label>
<input id="theme" name="theme">

<button class="k-button">Export Immagine</button>
<button class="k-button">Export Excel</button>
</body>
</html>

Jquery

$('#theme').kendoDropDownList({
    dataSource: [
        { text: "Original", value: "default" },
        { text: "Black", value: "black" },
        { text: "Blue Opal", value: "blueopal" },
        { text: "Metro", value: "metro" },
        { text: "Silver", value: "silver" }
  ],
  dataTextField: "text",
  dataValueField: "value",
  change: function (e) {
    var theme = (this.value() || "default").toLowerCase();
    changeTheme(theme);  
}
});

// 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);

        var theme = $('#theme').getKendoDropDownList().value();
    
        $('.k-chart').each(function () {
            var chart = $(this).data('kendoChart');
            chart.options.theme = skinName;
            chart.setOptions({ theme: theme });;
        });

    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 (kendo.support.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);

    }

    if (animate) {
        preloadStylesheet(url, replaceTheme);
    } else {
        replaceTheme();
    }
};

I know I have to use sessionStorage, but I don't really know how to implement that with Kendo. Can someone help me?

Upvotes: 1

Views: 147

Answers (1)

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

Set the session storage value inside the changeTheme function with the chosen theme name:

sessionStorage.setItem('user.theme', skinName);

Then check for it on page load, and set it if any value is set:

let userTheme = sessionStorage.getItem('user.theme');
  
if (userTheme) {
    changeTheme(userTheme);
    $('#theme').getKendoDropDownList().value(userTheme);
}

Dojo

Upvotes: 1

Related Questions