UI Widgets Markup Components

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


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

Type: Object

The dxTemplate markup component is used to introduce a template markup for collection container widget items (dxList, dxGallery, dxTileView, etc.). The template element should be contained in an element representing the required widget.

<div data-bind="dxTileView: { dataSource: tileViewData, itemTemplate: 'tileTemplate' }">
    <div data-options="dxTemplate: { name: 'tileTemplate' }">
        <h1 data-bind="text: $data.name"></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: $data.capital"></i></p>

The $data variable used within a template is a widget item object. You may also need to use other context variables provided by Knockout (e.g., $root). Refer to the Binding context article to learn what context variables are available.

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 this template is introduced. In this instance, this template will be applied for 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.

<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>)

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.