Markup Components

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

dxItem

Specifies markup for a widget item.

Type: Object

The dxItem component defines custom markup for items in layout and collection widgets. dxItem has different options depending on the widget where it is used. See the Default Item Template section in a specific widget's API Reference for a full list of them.

jQuery
HTML
    <div id="navBarContainer">
        <div data-options="dxItem: { disabled: true }"> 
            <!-- custom markup -->
        </div>
        <div data-options="dxItem: { badge: 'New'}"> 
            <!-- custom markup -->
        </div>
        <div data-options="dxItem: { }"> 
            <!-- custom markup -->
        </div>
    </div>
AngularJS
HTML
    <div dx-nav-bar="{ }">
        <div data-options="dxItem: { disabled: true }"> 
            <!-- custom markup -->
        </div>
        <div data-options="dxItem: { badge: 'New'}"> 
            <!-- custom markup -->
        </div>
        <div data-options="dxItem: { }"> 
            <!-- custom markup -->
        </div>
    </div>
Knockout
HTML
    <div data-bind="dxNavBar: { }">
        <div data-options="dxItem: { disabled: true }"> 
            <!-- custom markup -->
        </div>
        <div data-options="dxItem: { badge: 'New'}"> 
            <!-- custom markup -->
        </div>
        <div data-options="dxItem: { }"> 
            <!-- custom markup -->
        </div>
    </div>
NOTE
dxItem elements are ignored when the dataSource option is defined.

dxTemplate

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

Included in: dx.mobile.js, dx.web.js, dx.viz-web.js, dx.all.js
Type: Object

The dxTemplate markup component is used to introduce a template markup for collection container widget items (List, Gallery, TileView, etc.) or container widgets (Popup, etc.) in Knockout and AngularJS applications. The template element should be contained in an element representing the required widget.

AngularJS
HTML
<div dx-tile-view="{ dataSource: tileViewData, itemTemplate: 'tileTemplate' }" dx-item-alias="item">
    <div data-options="dxTemplate: { name: 'tileTemplate' }">
        <h1>{{item.name}}</h1>
        <p>Area: <i>{{item.area}}</i> km2</p>
        <p>Population: <i>{{item.population}}</i></p>
        <p>Capital: <i>{{item.capital}}</i></p>
    </div>
</div>
Knockout
HTML
<div data-bind="dxTileView: { dataSource: tileViewData, itemTemplate: 'tileTemplate' }">
    <div data-options="dxTemplate: { name: 'tileTemplate' }">
        <h1 data-bind="text: name"></h1>
        <p>Area: <i data-bind="text: area"></i> km2</p>
        <p>Population: <i data-bind="text: population"></i></p>
        <p>Capital: <i data-bind="text: capital"></i></p>
    </div>
</div>
NOTE
Pay attention to the binding context of the template that you define. In most cases, the binding context of an item template is the data source object that corresponds to the currently rendered item, and a view model - in other widget element templates. Since there can be exceptions in this rule, read notes in the descriptions of the corresponding XXXTemplate options and bind template elements to the accessible fields directly (see the code above). At the same time, you can access another binding context within a template, using Knockout/AngularJS binding variables.
NOTE
In AngularJS approach, in collection widgets, if you need to access item object's fields within a template, use a variable whose name is assigned to the dx-item-alias directive. Add the directive to the widget element to specify an alias to the root object of an item (see the code above). Without this directive, item object fields are beyond reach.

The dxTemplate component has a single option - "name". This is the template's identifier. Assign this name to the itemTemplate option of the widget in which the template is introduced. In this instance, this template will be applied to the widget items. However, the itemTemplate option has a specified default value, and you can use it as a name for the template. In this instance, you do not have to assign the template name to the widget's itemTemplate configuration option.

HTML
<div data-bind="dxRadioGroup:{dataSource: employees}">
    <div data-options="dxTemplate: {name: 'item'}">
        <span data-bind="text: name"></span> (hired at <span data-bind="text: hired"></span>)
    </div>
</div>

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

You can define special templates for specific devices. In addition, you can define multiple templates with the same name, which are targeted for different devices. To set a target device for a template, use the fields of the device object as markup options of dxTemplate.

JavaScript
<div data-options="dxTemplate: { name: 'item', platform: 'ios', phone: true }">
    This is a template for an iPhone.
</div>

<div data-options="dxTemplate: { name: 'item', tablet: true }">
    This is a template for any tablet.
</div>

As you can see, you can specify the target platform as well as the device type.