Pane Overview
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.
The Hybrid UI Pane widget groups one or more mobile views within the main view application. The mobile SplitView widget allows a side by-side display of several panes. The mobile PopOver automatically instantiates a mobile Pane widget for its contents.
The Hybrid UI Pane widget acts like an embedded mobile application, with most of the application features available—support for local and remote views, default layout and transition, lading, etc., with one exception being the browser history support. Navigating within the pane does not update the history state, so deep linking to a pane state is not supported.
Navigation
Between Panes
By default, navigational widgets change views in the containing pane. To target another pane, use the target
data attribute set to the id
of the pane. To change views in the mobile application, use data-target="_top"
.
The example below demonstrates how to implement navigation between Hybrid UI Panes.
<div data-role="splitview" id="main">
<div data-role="pane" id="side-pane">
<div data-role="view">
<a data-role="button" href="#bar" data-target="main-pane">Bar (main pane)</a>
<a data-role="button" href="#baz" data-target="_top">Baz (application)</a>
</div>
</div>
<div data-role="pane" id="main-pane">
<div data-role="view" id="foo">
Foo
</div>
<div data-role="view" id="bar">
Bar
</div>
</div>
</div>
<div data-role="view" id="baz">
<a data-role="button" href="#main">Go back to splitview</a>
</div>