The Kendo mobile Application provides the necessary tools for building native-looking web based mobile applications.

Getting Started

Hello World mobile Application

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

   <script>
   var app = new kendo.mobile.Application(); //document.body is used by default
   </script>
</body>

Mobile Views

The mobile Application consists of a single HTML page with one or more mobile Views, linked with navigational widgets (Buttons, TabStrip, etc.). A mobile View is considered each child of the application element (<body> by default) that is decorated with data-role="view".

Navigation

When initialized, the mobile Application modifies the kendo mobile widgets' behavior so that they navigate between Views when pressed. The navigation Widget's href attribute specifies the View id to navigate to.

Views linked with mobile Buttons

<div data-role="view" id="foo">Foo <a href="#bar" data-role="button">Go to Bar</a></div>
<div data-role="view" id="bar">Bar <a href="#foo" data-role="button">Go to Foo</a></div>

By default, all navigational widgets treat the links' hrefs as mobile views. This behavior can be overriden by setting data-rel="external" attribute to the link element.

External links

<a href="http://kendoui.com/" data-rel="external">Visit KendoUI</a>

View Transitions

View transitions are defined by setting a data-transition attribute to the View DOM element. A default View transition may be set using the transition parameter in the options parameter of the Application constructor. The following transitions are supported:

slide

This is the default iOS View transition. Old View content slides to the left and the new View content slides in its place. Headers and footers (if present) use the fade transition.

zoom

The new View (along with its header and footer) content zooms over the previous View. The old View content fades out. Suitable for displaying dialogs.

fade

The new View (along with its header and footer) content fades from the center of the screen, on top of the previous View content.

overlay

The new View content slides on top of the previous View. Unlike the slide transition, the previous View stays "under" the new one, and the headers / footers do not transition separately.

The transition direction can be specified by using overlay:(direction). Supported directions are down, left, up and right. By default, the direction is left.

Views with Transitions

<div data-role="view" id="foo" data-transition="slide">Foo <a href="#bar" data-role="button">Go to Bar</a></div>
<div data-role="view" id="bar" data-transition="overlay:up">Bar <a href="#foo" data-role="button">Go to Foo</a></div>

When a View transitions to the View displayed before it (foo → bar → foo), this is considered a back navigation. In this case, the animation of the current View is applied in reverse. For instance, navigating with slide animation from foo to bar, then back to foo would cause the foo View to slide from the right side of the screen.

Remote Views

The Kendo mobile Application can load Views remotely by using AJAX. If the navigational widget URL does not start with a hash (#), the application considers the View to be remote, and issues an AJAX request to the provided URL. The View content (the first element with data-role="view") are extracted from the AJAX response and appended into the Application element. Once the remote View is fetched, no additional roundtrips to the server occur when the View is displayed.

Remote View

<!-- foo.html -->
<div data-role="view">Foo <a href="bar.html" data-role="button">Go to Bar</a></div>

<!-- bar.html -->
<div data-role="view">Bar</div>

View Parameters

Navigational widgets can pass additional URL parameters when navigating to Views. The parameters will be available in the show View event.

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>

Initial View

The Application provides a way to specify the initial view to show. The initial view can be set by passing the view id in the options parameter of the Application's constructor:

Define initial view

<script>
     new kendo.mobile.Application($(document.body), {
         initial: "ViewID"
     });
</script>

Web Clip Icons

The mobile devices can create a bookmark with a custom icon, placed on the Home screen. Users can use the shortcut to open that web page later.

Define web clip icon

<script>
     new kendo.mobile.Application($(document.body), {
         icon: "URL to a web clip icon"
     });
</script>

You can also define web clip icons with different sizes. Check this link for more information.

Define multiple web clip icons

<script>
     new kendo.mobile.Application($(document.body), {
         icon: {
           "72x72" : "URL to a 72 x 72 pixels web clip icon",
           "114x114" : "URL to a 114 x 114 pixels web clip icon"
         }
     });
</script>