Use switch in non-mobile application

[Lisa]

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!

[Petyo]

Hello Lisa,

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

Regards,
Petyo
Telerik

 

 

[Lisa]

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.

[Josh]

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?

[Petyo]

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

 

 

[Inception]

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

[Ianko]

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

 

 

[Inception]

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

[AppDev]

Your adaptive switch demo is broken.

[Iliana Dyankova]

Hi Ron,

The adaptive Switch demo can be found here: 

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

Regards,
Iliana Nikolova
Telerik by Progress

 

 

[Shafi]

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.

[Iliana Dyankova]

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

[Narendra]

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

[Ianko]

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