Markup Components

This section describes components that can be used when defining a widget markup.


An object used to define markup options for a template element.

Type: Object

A template element is a view element used to render each item of a collection container widget (dxList, dxGallery, dxTileView, etc.). You can also use a dxTemplate element to specify the template for a dxList group caption, if the grouped configuration option of the widget is set to 'true'. The group template name is assigned to the groupTemplate option of the widget.

The default values of the itemTemplate and groupTemplate configuration options of all widgets containing these options are 'item' and 'group', respectively. That is why, if a group template element name is 'group' or an item template name is 'item', you do not have to assign the template name to the widget's groupTemplate or itemTemplate configuration options.

The template element should be contained in an element representing the required widget.

A widget element can contain several template elements. Use the itemTemplate configuration option of the collection container widget to specify which template to use for rendering.

The following example illustrates how to create a template for dxTileView widget items.

<div data-bind="dxTileView: { dataSource: tileViewData, itemTemplate: 'tileTemplate' }">
    <div data-options="dxTemplate: { name: 'tileTemplate' }">
        <h1 data-bind="text: $"></h1>
        <p>Area: <i data-bind="text: $data.area"></i> km2</p>
        <p>Population: <i data-bind="text: $data.population"></i></p>
        <p>Capital: <i data-bind="text: $"></i></p>

The $data variable used within a template is a widget item object.