We have a couple Responsive Web Applications (desktop first, responsive to mobile second) that use Kendo UI and either KnockOut or Angular 1.x. We do not use different URL's or serve different pages/content to mobile devices, though the styling and placement of elements is different thanks to CSS Media Queries and some Javascript we've written.
I've seen the demo for the mobile friendly DropDownList and I like the way it works for mobile devices. However, we want to ensure that this version only shows for mobile devices, and not for desktop users. Is there any way to get this kind of behavior?
1) Can we include the mobile stylesheet? Will it apply only to mobile devices?
2) Can we use Kendo UI Mobile in a desktop web app without using kendo.mobile.Application?
3) How do we get Kendo UI Mobile widgets only on mobile devices and have the same widgets show on Desktop in their normal Desktop style/behavior?
1 Answer, 1 is accepted
The mobile friendly widget is the same Kendo DropDownList widget but with mobile specific styling.
Including the mobile stylesheet will not resolve the problem as the mobile specific styling relies on mobile ListView classes and mobile Application classes that are appended to the body tag.
You may consider using a native <select> element on mobile devices as most modern browsers present a native mobile UI for it.
Regarding your other questions:
2) Can we use Kendo UI Mobile in a desktop web app without using kendo.mobile.Application?
The sort answer is yes. Please check this help topic.
3) How do we get Kendo UI Mobile widgets only on mobile devices and have the same widgets show on Desktop in their normal Desktop style/behavior?
You may use kendo.support to detect if the application is running on mobile or desktop environment and conditionally initialise the corresponding widgets.
Regards,
Alexander Valchev
Telerik