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

How to build a kendoThemeChooser like on your website

18 Answers 341 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Yosefx
Top achievements
Rank 1
Yosefx asked on 28 Mar 2013, 05:13 PM
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

18 Answers, 1 is accepted

Sort by
0
Holger
Top achievements
Rank 1
answered on 28 Mar 2013, 07:30 PM
Please have a look at the following thread: SkinSelector to choose Kendo CSS templates

0
Yosefx
Top achievements
Rank 1
answered on 28 Mar 2013, 07:34 PM
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,
0
Kamen Bundev
Telerik team
answered on 29 Mar 2013, 09:37 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Costa
Top achievements
Rank 1
answered on 29 May 2017, 10:56 AM

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?

 

0
Costa
Top achievements
Rank 1
answered on 29 May 2017, 11:15 AM
P.S. ASP.NET MVC 5
0
Tsvetina
Telerik team
answered on 31 May 2017, 08:55 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Costa
Top achievements
Rank 1
answered on 31 May 2017, 11:38 AM
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?
0
Tsvetina
Telerik team
answered on 02 Jun 2017, 10:45 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Costa
Top achievements
Rank 1
answered on 04 Jun 2017, 01:01 AM
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.
0
Costa
Top achievements
Rank 1
answered on 15 Jun 2017, 08:39 AM
Sorry, I can not figure out how to apply a specific theme when starting the application. Please, help)
0
Tsvetina
Telerik team
answered on 22 Jun 2017, 02:20 PM
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.:

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Costa
Top achievements
Rank 1
answered on 19 Jul 2017, 01:57 PM

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.

0
Costa
Top achievements
Rank 1
answered on 27 Jul 2017, 09:16 AM
Ok, I figured out this CSS.
0
Kim
Top achievements
Rank 1
answered on 24 Jan 2019, 09:52 PM

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

0
Tsvetina
Telerik team
answered on 25 Jan 2019, 11:16 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Kim
Top achievements
Rank 1
answered on 25 Jan 2019, 04:27 PM
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
0
Kim
Top achievements
Rank 1
answered on 25 Jan 2019, 05:23 PM

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

0
Tsvetomir
Telerik team
answered on 29 Jan 2019, 02:45 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
General Discussions
Asked by
Yosefx
Top achievements
Rank 1
Answers by
Holger
Top achievements
Rank 1
Yosefx
Top achievements
Rank 1
Kamen Bundev
Telerik team
Costa
Top achievements
Rank 1
Tsvetina
Telerik team
Kim
Top achievements
Rank 1
Tsvetomir
Telerik team
Share this question
or