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

Use switch in non-mobile application

13 Answers 195 Views
Switch (Mobile)
This is a migrated thread and some comments may be shown as answers.
Lisa
Top achievements
Rank 1
Lisa asked on 23 Oct 2014, 12:56 AM
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!

13 Answers, 1 is accepted

Sort by
0
Accepted
Petyo
Telerik team
answered on 24 Oct 2014, 08:14 AM
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!
 
0
Lisa
Top achievements
Rank 1
answered on 24 Oct 2014, 02:04 PM
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.
0
Josh
Top achievements
Rank 1
answered on 31 Mar 2015, 02:42 PM
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?
0
Petyo
Telerik team
answered on 02 Apr 2015, 10:50 AM
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!
 
0
Ron
Top achievements
Rank 1
Veteran
answered on 11 Jul 2016, 06:56 PM

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

0
Ianko
Telerik team
answered on 13 Jul 2016, 01:42 PM
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.
 
0
Ron
Top achievements
Rank 1
Veteran
answered on 13 Jul 2016, 03:11 PM

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

0
AppDev
Top achievements
Rank 1
answered on 20 Sep 2016, 03:32 PM
Your adaptive switch demo is broken.
0
Iliana Nikolova
Telerik team
answered on 22 Sep 2016, 12:03 PM
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.
 
0
Shafi
Top achievements
Rank 1
answered on 06 Dec 2016, 05:25 AM
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.
0
Iliana Nikolova
Telerik team
answered on 07 Dec 2016, 03:49 PM
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.
0
Narendra
Top achievements
Rank 1
answered on 28 Mar 2018, 04:13 PM

hi, 

I am also trying to use the switch in a non-mobile application. How should I access the events and switch state? 

Thanks,

Narendra

0
Ianko
Telerik team
answered on 29 Mar 2018, 04:52 AM
Hello Narendra,

If you are using the switch in without the kendo.mobile.Application() class, then you should use the kendoMobileSwitch() method to initialize the widget. That way you can pass options and event handlers the same way as with every widget API. https://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/switch/events/change

Here you are a dojo example: https://dojo.telerik.com/uzElUtuh

Regards,
Ianko
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Switch (Mobile)
Asked by
Lisa
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Lisa
Top achievements
Rank 1
Josh
Top achievements
Rank 1
Ron
Top achievements
Rank 1
Veteran
Ianko
Telerik team
AppDev
Top achievements
Rank 1
Iliana Nikolova
Telerik team
Shafi
Top achievements
Rank 1
Narendra
Top achievements
Rank 1
Share this question
or