How to build a kendoThemeChooser like on your website

[Yosefx]

Hello,
at this link http://demos.kendoui.com/web/styling/index.html i see in your page a theme chooser.

I would like to implement the same theme chooser on my website but i cannot find the method kendoThemeChooser() that you use on the page.

Can you help me to implement this kind of theme changer with colors preview?

Best Regards,
ECN2 Technologies

[Holger]

Please have a look at the following thread: SkinSelector to choose Kendo CSS templates

[Yosefx]

Hello,
thanks for your reply.
I tryied your solution but i receive an error at line:

Application.fetchSkin(newSkin, true);

saying that Application is not defined.

Also, i would like to implement the chooser like in your page with the colors preview instead of the Dowpdownlist.

Bests,

[Kamen Bundev]

Hello Giuseppe,

Here is the previous ThemeChooser of the Kendo UI Demos page, it may give you some hints how to implement it like you wish:


Greetings,
Kamen Bundev
the Telerik team

[Costa]

Hello. Why does this solution (as well as http://docs.telerik.com/kendo-ui/styles-and-layout/how-to/change-themes-on-the-client) work in Chrome and does not work in IE11?

 

[Costa]

P.S. ASP.NET MVC 5

[Tsvetina]

Hello Costa,

The example from the link you shared does work in IE, according to my tests. I opened the sample in a full-screen Dojo and ran it in IE 11 and it works as expected:
http://runner.telerik.io/fullscreen/@tsveti/iZafA

If you are trying to do this in an MVC app, you may need to adjust the code that locates and replaces the styles files with the new ones. The example depends on the styles files loaded one by one in the page, so if you use StyleBundles, it will not work as expected.

You can also take a look at the ThemeChooser custom widget used in the UI for ASP.NET MVC demos project. You can open the demos locally and go to Scripts/theme-chooser.js to see the definition of the widget and then to Views/Shared/ThemeChooser.cshtml partial view to see how the chooser is then used in a page.

Regards,
Tsvetina
Progress Telerik

[Costa]

The problem seems to be in references in _Layout View (VS 2017 MVC 5 App, with Telerik UI for ASP.NET MVC).

Variant 1:

    <link href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <link href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <link href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />

Variant 1 theme applied in Chrome and IE11, but slowly, and apparently does not work in the local network.

Variant 2:

    <link href="@Url.Content("~/Content/kendo/2017.2.504/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2017.2.504/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2017.2.504/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2017.2.504/kendo.default.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2017.2.504/kendo.dataviz.flat.min.css")" rel="stylesheet" type="text/css" />

Variant 3:

    <link href="~/Content/kendo/2017.2.504/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/kendo/2017.2.504/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/kendo/2017.2.504/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/kendo/2017.2.504/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/kendo/2017.2.504/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />

Variants 2, 3 theme applied as expected in Chrome. In IE11 the current theme disappears and the new one does not apply.

Where does the error lie? Can you help?

[Tsvetina]

Hi Costa,

The issue seems related to a specific of IE, where local references are not reloaded, when added to the head dynamically. If you don't want to use the CDN, I would again suggest you to use the ThemeChooser custom control introduced in the MVC examples project. I isolated it in a small project, so you can follow its usage more easily. I am attaching the project to this message (note that you will need to add the Kendo UI files to the project to be able to run it). Related code is placed in the following files:

• Views/Index.cshtml
• Scripts/theme-chooser.js
• Content/Site.css (towards the bottom)

Note that with this implementation, you need to have a container for your page content with id="example" or you need to modify line 242 of theme-chooser.js.

Regards,
Tsvetina
Progress Telerik

[Costa]

Hello, Tsvetina, thank you for your careful and constructive attitude to my question. Also thanks for a good example. I'm sure that this example will also help other users of your wonderful framework.

[Costa]

Sorry, I can not figure out how to apply a specific theme when starting the application. Please, help)

[Tsvetina]

Hi Costa,

If it would be e default theme every time, you can just add references to the specific theme styles in the page CSS references, e.g.:

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />

You can also manually set a theme by calling the value method of the ThemeChooser:

var chooser = $("#chooser").data("kendoThemeChooser");
chooser.value("moonlight");

Or do you mean something else that I am missing out?

Regards,
Tsvetina
Progress Telerik

[Costa]

Hi Tsvetina,

With your help, I finally caught this "black cat in a dark room").

Just one more question.

I can not achieve the expected layout @Html.Partial ("ThemeChooser") in Kendo.Menu.Item.Content,

see the picture and the project (what's left of Kendo.Mvc.Examples.sln after my modifications)

Thanks.

[Costa]

Ok, I figured out this CSS.

[Kim]

Hi Tsvetina,

It doesn't seem to work with the current (2019) version. Can you please tell with css files to use instead? When I included your little demo code in my project, as soon as you choose a different theme, it would mess up the page and stop working.

Thanks,

KC

[Tsvetina]

Hello Kim,

I am not sure what is going wrong in your project but I tested the last example I attached to this reply and after I updated it to 2019.1.115, it kept working as expected. Here is a quick video showing that: https://www.screencast.com/t/geHbWuxZP.

If the issue persists on your side, could you open a support ticket and send us your project or  share the files with the changes that you made to add the theme chooser implementation?

Regards,
Tsvetina
Progress Telerik

[Kim]

Hi Tsvetina,

Thanks for your reply. First of all, I can’t seem to play back the video on Screencast as it's empty. Can you please send me another way to look at it? Also, as far as the theme chooser is concerned, could it be that the way the CSS files are installed to?

Thanks again,
KC

[Kim]

Hi Tsvetina,

Now I can play the video, it's blocked by company's firewall rules. Anyway, it doesn't show the color palette like yours and the theme never gets changed with different selections (it's default theme is blue opal). My Telerik version is the same (2019.1.115) and I'm running the same theme_chooser.js file in the project. What could be wrong?

Also, in the following script snippet, where is colors[] defined?

======================================================

<script id="theme-item-template" type="text/x-kendo-template">
    <li class="tc-item">
        # for (var i = 0; i < colors.length; i++) { #
        <span class="tc-color" style="background-color: #= colors[i] #"></span>
        # } #
        <span class="tc-name">#: name #</span>
    </li>
</script>

=============================================================

Thanks again,

Kim

[Tsvetomir]

Hi Kim,

The attached project requires you to add the CSS and JavaScript files. Can you ensure that the Kendo UI themes are included in the styles folder of the project:

Content -> kendo -> styles

Also, can you check the DevTools developer tools for any errors which might be thrown?

As per the colors collection which is present in the theme-item-template Template - they are responsible for showing the three colorful circles before the themes' names. The Kendo UI ThemeChooser widget is bound to the ThemeChooserViewModel. It is a Kendo UI Observable object which contains two collections - sassThemes and themes. Since the data source is populated with the themes, it is a collection which has objects with three fields - value, name, colors. "Colors" is a collection of three strings representing the hexadecimal representation of the specific color.

The template has access to these objects and they can be used to build a fluent template. More information and specifics on the different themes can be found in the theme-chooser.js file. 

If the issue persists after adding the CSS and JavaScript files, also ensuring that no JavaScript error is thrown, send us back a sample project in which the faulty behavior can be observed.


Kind regards,
Tsvetomir
Progress Telerik