Use switch in non-mobile application

12 posts, 1 answers
  1. Lisa
    Lisa avatar
    20 posts
    Member since:
    Feb 2014

    Posted 22 Oct 2014 Link to this post

    Hello,

    We would like to use the mobile switch without doing an entire mobile application (i.e. within an HTML5/CSS3 application using Kendo Web UI).  I have managed to determine the minimum integration with Kendo Mobile to get a switch control to work, but unfortunately, by running new kendo.mobile.Application, it affects other controls, like kendo drop-down-lists (see the attached graphic for a sample of what happens to a kendo drop-down list).

    I tried localizing the scope of the effects by defining a <div> just around the switch and calling new kendo.mobile.Application($("#divAroundTheSwitches")), but this didn't work -- no switches were created.

    Is it feasible to try to use mobile platform widgets in a non-mobile HTML5/CSS3 application?  Any direction you could give would be greatly appreciated.

    Thank you!
  2. Answer
    Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 24 Oct 2014 Link to this post

    Hello Lisa,

    Please take a look at the following demo and the respective help article.

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Lisa
    Lisa avatar
    20 posts
    Member since:
    Feb 2014

    Posted 24 Oct 2014 in reply to Petyo Link to this post

    Thank you!  This is perfect.  I had seen that help article several months ago and could not for the life of me find it again.
  5. Josh
    Josh avatar
    50 posts
    Member since:
    Jul 2009

    Posted 31 Mar 2015 Link to this post

    Why do the mobile switches look so different in the adaptive demo vs the basic usage demo? Can the adaptive look be adapted to show the mobile/basic visual elements?
  6. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 02 Apr 2015 Link to this post

    Hi,

    the looks of the switch are defined in the web skin; indeed, they are different from the iOS theme. There is no "easy way" to move the look in the iOS theme here, apart from modifying the CSS file. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Ron
    Ron avatar
    48 posts
    Member since:
    Oct 2010

    Posted 11 Jul in reply to Petyo Link to this post

    Hi,

    I followed the instructions on the linked article. When including the necessary .css files, for instance "kendo.silver.mobile.min.css", the styling of Kendo UI web components are messed up. The "kendo.silver.mobile.min.css" stylesheet file contains styling for all components and thus breaks styling of web components.In my case I would like to use the Switch component in a Kendo UI web application but I don't want to include all mobile styling because of this.  Suggestions?

    Regards,
    Ron

  8. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 13 Jul Link to this post

    Hello Ron,

    I am not quite sure which are the components you are using along with the Switch. Also your query addresses issues related to the specific scenario you have. 

    Due to that and the fact that this thread is 1 year old, I suggest you to open a new thread or send us a ticket with more details about the specific situation. Also, it would be greatly appreciated if you can create a Dojo (http://dojo.telerik.com/) which to demonstrate the exact issue and enable us to define better what the problem is and further suggest you possible resolutions. 

    Regards,
    Ianko
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  9. Ron
    Ron avatar
    48 posts
    Member since:
    Oct 2010

    Posted 13 Jul in reply to Ianko Link to this post

    Never mind Lanko, it turns out that there was something wrong with our .css generation from the .less source files. Themes got mixed up, but we have figured out what was wrong on our end.

    Gr,
    Ron

  10. Travis
    Travis avatar
    4 posts
    Member since:
    Mar 2015

    Posted 20 Sep in reply to Petyo Link to this post

    Your adaptive switch demo is broken.
  11. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 22 Sep Link to this post

    Hi Ron,

    The adaptive Switch demo can be found here: 

    http://demos.telerik.com/kendo-ui/switch/index

    Regards,
    Iliana Nikolova
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  12. Shafi
    Shafi avatar
    44 posts
    Member since:
    Dec 2014

    Posted 3 days and 20 hours ago in reply to Petyo Link to this post

    Hi! I need to use the Switch in Kendo Grid (non-mobile) and the link to demo is a simple scenario. Also, the help topic link is 404.
  13. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 2 days and 10 hours ago Link to this post

    Hi Shafi,

    To add Kendo UI Mobile Switch to Grid you should use a column.template and initialize the widget in the dataBound event. Take a look at the following example: 

    http://dojo.telerik.com/@Iliana/eYUCi


    Regards,
    Iliana Nikolova
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
Back to Top
Kendo UI is VS 2017 Ready