Integration with Kendo UI for the Web
Starting with the R2 2023 release, Kendo UI will no longer ship Hybrid UI components. This means that the R2 2023 will be the last release to include Kendo Hybrid in the Kendo UI package. See full announcement in Kendo jQuery blog post. The last stable version that we recommend to use for Kendo Hybrid components is R3 2022 SP1.
As of the Kendo UI Q1 2014 release, the Kendo UI hybrid for mobile devices can be used alongside the Kendo UI widgets for the web in a regular web page, without an active mobile application instance.
Basic Usage
This approach is suitable if you use Kendo UI hybrid UI with third-party Single-Page Application (SPA) frameworks like Angular or Backbone, or if you develop a mobile version of a website which does not need native mobile app look. The Kendo UI Web CSS files contain the necessary rules, so that a unified look can be achieved.
Important
In addition to
kendo.common.cssand the skin stylesheet, the hybrid mobile widgets need one additional reference—kendo.[skin].mobile.cssorkendo.[skin].mobile.min.css, where[skin]is your current Kendo UI web skin name. The stylesheets are available in theWeb/Complete bundles. For instance, if theSilverKendo UI web skin should be used for styling Kendo UI web and hybrid widgets, the stylesheet references shown in the example below are needed.
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.silver.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.silver.mobile.min.css" rel="stylesheet" type="text/css" />
Additionally, these web mobile skins can be used with a normal hybrid mobile Kendo UI Application. Note that cannot be used with the Kendo UI mobile platform styling, so the Kendo UI mobile platform CSS—even the common styling—should not be loaded (everything needed is already included).
Getting Started
Instantiate the Hybrid Mobile Switch
The example below demonstrates how to instantiate a hybrid mobile Switch widget.
<input type="checkbox" id="my-switch" />
<script>
$("#my-switch").kendoMobileSwitch();
</script>
Known Limitations
- As a mobile application instance is missing, its features—declarative widget initialization, view transitions, and browser history binding among others—do not work.
- Unlike the application mode, this mode primarily targets mobile websites. Thus the mobile OS skins—Android/iOS—are not supported.
- Certain ListView features—pull to refresh, endless scrolling, press to load more, fixed headers—rely on the mobile Scroller. The ListView widget should be instantiated in a mobile Scroller widget element.
- The mobile Drawer widget should have its
containerconfiguration option set. The Drawer is not going to close automatically when navigation is performed.