Edit this page

Layout

The Kendo UI Hybrid Layout feature is used to share headers and footers between multiple Views. The header and footer elements of the Layout are applied to any View that uses it.

Getting Started

Define the Layout

To define the layout, set data-role="layout" to an element. When a view with the given layout is displayed, the layout attaches its header and footer to it.

Important

When instantiated, the layout detaches its element from the document tree.

A View is associated with a Layout by setting its data-layout attribute value to the ID of the layout, specified by the data-id attribute.

The example below demonstrates how to define views with layout.

Example
<div data-role="view" data-layout="foo">Foo view</div>
<div data-role="view" data-layout="foo">Bar view</div>

<div data-role="layout" data-id="foo">
  <div data-role="header">Header</div>
  <div data-role="footer">Footer</div>
</div>

Platform Configuration

Defaults

A default application layout can be set through the layout configuration option of the Application. A mobile View can remove the default application layout by setting data-layout="".

The example below demonstrates a default application layout.

Example
<div data-role="view">Bar</div>

<div data-role="layout" data-id="foo">
  <div data-role="header">Header</div>
</div>

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

Platform-Specific

Layouts can be platform-specific, allowing for different layout and behavior per platform. A layout platform can be specified using data-platform="".

The example below demonstrates an iOS and Android application layout.

Example
<div data-role="view">Bar</div>

<div data-role="layout" data-id="foo" data-platform="ios">
  <div data-role="header">Header</div>
</div>

<div data-role="layout" data-id="foo" data-platform="android">
  <div data-role="header">Header</div>
</div>

DOM Elements

Each Layout instance exposes the following fields:

  • header—This is the header DOM element.
  • footer—The footer DOM element.

See Also

Other articles related to the appearance and styling of Kendo UI hybrid distribution: