How to build a kendoThemeChooser like on your website

14 posts, 0 answers
  1. Yosefx
    Yosefx avatar
    2 posts
    Member since:
    Oct 2012

    Posted 28 Mar 2013 Link to this post

    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
  2. Holger
    Holger avatar
    78 posts
    Member since:
    Nov 2012

    Posted 28 Mar 2013 Link to this post

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

  3. Yosefx
    Yosefx avatar
    2 posts
    Member since:
    Oct 2012

    Posted 28 Mar 2013 Link to this post

    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,
  4. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 29 Mar 2013 Link to this post

    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!
  5. Costa
    Costa avatar
    16 posts
    Member since:
    Mar 2014

    Posted 29 May in reply to Kamen Bundev Link to this post

    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?

     

  6. Costa
    Costa avatar
    16 posts
    Member since:
    Mar 2014

    Posted 29 May in reply to Costa Link to this post

    P.S. ASP.NET MVC 5
  7. Tsvetina
    Admin
    Tsvetina avatar
    2076 posts

    Posted 31 May Link to this post

    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
  8. Costa
    Costa avatar
    16 posts
    Member since:
    Mar 2014

    Posted 31 May in reply to Tsvetina Link to this post

    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?
  9. Tsvetina
    Admin
    Tsvetina avatar
    2076 posts

    Posted 02 Jun Link to this post

    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
  10. Costa
    Costa avatar
    16 posts
    Member since:
    Mar 2014

    Posted 03 Jun in reply to Tsvetina Link to this post

    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.
  11. Costa
    Costa avatar
    16 posts
    Member since:
    Mar 2014

    Posted 15 Jun Link to this post

    Sorry, I can not figure out how to apply a specific theme when starting the application. Please, help)
  12. Tsvetina
    Admin
    Tsvetina avatar
    2076 posts

    Posted 22 Jun Link to this post

    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
  13. Costa
    Costa avatar
    16 posts
    Member since:
    Mar 2014

    Posted 19 Jul in reply to Tsvetina Link to this post

    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.

  14. Costa
    Costa avatar
    16 posts
    Member since:
    Mar 2014

    Posted 27 Jul in reply to Costa Link to this post

    Ok, I figured out this CSS.
Back to Top