DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Layout Deprecated

include spa-deprecated-note

A markup component used to define markup options for a layout.

Included in:, dx.web.js, dx.viz-web.js, dx.all.js


The dxLayout markup component allows you to introduce a custom layout HTML template. To indicate a particular markup as a layout, wrap this markup by a div element and set the element's data-options attribute to dxLayout. Set a name for the layout using the name option of the dxLayout component.

<div class="my-layout" data-options="dxLayout: { name:'default' }">
    <div class="layout-header" data-bind="dxToolbar: { dataSource:toolbarData }"></div>
    <div class="layout-content" data-options="dxContentPlaceholder: { name:'content', animation:'slide' }"></div>
    <div class="layout-footer" data-options="dxContentPlaceholder: { name:'footer', animation:'overflow' }"></div>

You can define a layout for a specific device only (e.g. iPhone). For this purpose, specify dxLayout options with the same names as the fields of the device object.

To render the layout markup and fill it with missing content (merge it with the view markup and add commands to command containers), a layout controller must be created. In addition, a layout markup can be accompanied by style sheets (CSS). For more information about layouts, refer to the Define Layouts help article.

There is a set of predefined layouts that cover the most popular templates for screens in mobile applications. Once you choose an appropriate layout set, the layouts that are most appropriate in the current navigation context will be applied.


This section describes configuration options used to create a layout.

Name Description

Specifies the name of the layout.