New to Kendo UI for jQuery? Download free 30-day trial

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.

What's New in Kendo UI R2 2023

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.css and the skin stylesheet, the hybrid mobile widgets need one additional reference—kendo.[skin].mobile.css or kendo.[skin].mobile.min.css, where [skin] is your current Kendo UI web skin name. The stylesheets are available in the Web/Complete bundles. For instance, if the Silver Kendo 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 container configuration option set. The Drawer is not going to close automatically when navigation is performed.

See also

In this article