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

View 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.

What's New in Kendo UI R2 2023

The Hybrid UI View component represents a screen in the kendo mobile Application. The Application automatically instantiates a mobile View for each element with a role data attribute set to view.

Getting Started

Initialize the View

The example below demonstrates how to initialize the View component.

<div data-role="view">Hello world!</div>

Features

Headers and Footers

By default, the mobile View content stretches to fit the application element. Also, the mobile View may also have a header and a footer. To mark the header and footer elements, add block elements, such as div, header, and footer among others, with the data-role="header" and data-role="footer" attribute.

The example below demonstrates a mobile View with a header and a footer.

<div data-role="view">
    <div data-role="header">Header</div>
    Hello world!
    <div data-role="footer">Footer</div>
</div>

Important

Because of the OS UI design conventions, the header and the footer switch positions when an Android device is detected. Usually the footer hosts a mobile TabStrip component, which is located at the bottom of the screen on iOS, and at the top of the screen in Android applications.

Parameters

Navigational components can pass additional URL parameters when navigating to Views. The parameters are accessible in the view show event handlers.

The example below demonstrates a button with additional URL parameters.

<a data-role="button" href="#foo?bar=baz">Link to FOO <strong>View</strong> with bar parameter set to baz</a>

<div data-role="view" id="foo" data-show="fooShow"></div>

<script>
    function fooShow(e) {
         e.view.params // {bar: "baz"}
    }
</script>

DOM Elements

Each mobile View instance exposes the following fields:

  • header—The View, or the applied mobile layout, header DOM element.
  • footer—The View, or the applied mobile layout, footer DOM element.
  • content—The View content DOM element.
  • scrollerContent—The View mobile Scroller container DOM element. Recommended if the mobile View contents need to be manipulated or replaced.

See Also

In this article