React Markup Components API

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
JavaScript
<div id="list">
    <div data-options="dxItem: { text: 'Apples', disabled: true }"></div>
    <div data-options="dxItem: { text: 'Lemons', visible: false }"></div>
    <div data-options="dxItem: { }">
        <!-- Custom markup -->
    </div>
</div>
$(function() {
    $("#list").dxList({/* ... */});
});
Angular
app.component.html
app.module.ts
<dx-list>
    <dxi-item text="Apples" [disabled]="true"></dxi-item>
    <dxi-item text="Lemons" [visible]="false"></dxi-item>
    <dxi-item>
        <!-- Custom markup -->
    </dxi-item>
    <dxi-item>
        <!-- A nested component should be wrapped in an element with a parameterless dxTemplate directive -->
        <div *dxTemplate>
            <dx-button text="I am a nested component"></dx-button>
        </div>
    </dxi-item>
</dx-list>
import { DxListModule } from "devextreme-angular";
// ...
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})
export class AppModule { }
AngularJS
HTML
JavaScript
<div dx-list="{ }">
    <div data-options="dxItem: { text: 'Apples', disabled: true }"></div>
    <div data-options="dxItem: { text: 'Lemons', visible: false }"></div>
    <div data-options="dxItem: { }">
        <!-- Custom markup -->
    </div>
</div>
angular.module('DemoApp', ['dx'])
    .controller('DemoController', function ($scope) {
        // ...
    });
Knockout
HTML
JavaScript
<div data-bind="dxList: { ... }">
    <div data-options="dxItem: { text: 'Apples', disabled: true }"></div>
    <div data-options="dxItem: { text: 'Lemons', visible: false }"></div>
    <div data-options="dxItem: { }">
        <!-- Custom markup -->
    </div>
</div>
var viewModel = {
    // ...
};

ko.applyBindings(viewModel);
React
App.js
import React from 'react';
import List, { Item } from 'devextreme-react/list';

class App extends React.Component {
    render() {
        return (
            <List>
                <Item text="Apples" disabled={true} />
                <Item text="Oranges" visible={false} />
                <Item>
                    <!-- Custom markup -->
                </Item>
            </List>
        );
    }
}
export default App;
NOTE
dxItem elements are ignored when the dataSource option is defined.

dxTemplate

A custom template's markup.

Type:

Object

The dxTemplate markup component specifies a custom template for a container widget or a collection widget's items in Angular, AngularJS and Knockout apps. Place this template within the widget's element, specify the template name and assign it to the corresponding xxxTemplate option (for example, itemTemplate, containerTemplate). You can omit specifying the xxxTemplate option if you use the default template name, for instance, item for the itemTemplate, content for the contentTemplate.

Commonly, the dxTemplate is in the component's (Angular), scope's (AngularJS) or view model's (Knockout) binding context, but it can differ depending on the widget element you specify the template for. See the corresponding xxxTemplate option description for more information on a specific template's binding context. Use Knockout or AngularJS binding variables if you need to access another binding context from the template.

Angular
HTML
TypeScript
<dx-popup
    [width]="300"
    [height]="250"
    contentTemplate="info"
    [visible]="true">
    <div *dxTemplate="let data of 'info'">
        <p>
            Full Name:
            <span>{{employee.FirstName}}</span>
            <span>{{employee.LastName}}</span>
        </p>
        <p>Birth Date: <span>{{employee.BirthDate}}</span></p>
        <p>Address: <span>{{employee.Address}}</span></p>
    </div>
</dx-popup>
import { DxPopupModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        FirstName: "Sandra",
        LastName: "Johnson",
        BirthDate: "1974/11/15",
        Address: "4600 N Virginia Rd."
    };
}
@NgModule({
    imports: [
        // ...
        DxPopupModule
    ],
    // ...
})
AngularJS
HTML
JavaScript
<div ng-controller="DemoController">
    <div class="popup" 
        dx-popup="{
            width: 300,
            height: 250,
            contentTemplate: 'info',   
            visible: true
        }">
        <div data-options="dxTemplate: { name:'info' }">
            <p>
                Full Name:
                <span>{{employee.FirstName}}</span> 
                <span>{{employee.LastName}}</span>
            </p>            
            <p>Birth Date: <span>{{employee.BirthDate}}</span></p>
            <p>Address: <span>{{employee.Address}}</span></p>
        </div>
    </div>    
</div>
angular.module("DemoApp", ["dx"])
    .controller("DemoController", function DemoController($scope) {
        $scope.employee = {
            FirstName: "Sandra",
            LastName: "Johnson",
            BirthDate: "1974/11/15",
            Address: "4600 N Virginia Rd."
        };
    });
Knockout
HTML
JavaScript
<div data-bind="dxPopup: {
    width: 300,
    height: 250,
    contentTemplate: 'info',   
    visible: true
}">
    <div data-options="dxTemplate: { name:'info' }">
        <p>
            Full Name:
            <span data-bind="text: employee.FirstName"></span> 
            <span data-bind="text: employee.LastName"></span>
        </p>            
        <p>Birth Date: <span data-bind="text: employee.BirthDate"></span></p>
        <p>Address: <span data-bind="text: employee.Address"></span></p>
    </div>   
</div>
var viewModel= {
    employee: {
        FirstName: "Sandra",
        LastName: "Johnson",
        BirthDate: "1974/11/15",
        Address: "4600 N Virginia Rd."
    }
};

ko.applyBindings(viewModel);

When you specify an item template in Knockout apps, you can bind this template's elements directly to an item object's fields. In Angular and AngularJS apps, an item object extends the standard binding context. In AngularJS apps, you can access it only using an alias that you specify in the dx-item-alias directive. In Angular apps, use the input variable that is declared via the let keyword. In all Angular, AngularJs and Knockout apps, you can also bind a template element to the rendered item's index using the index keyword.

Angular
HTML
TypeScript
<dx-list [dataSource]="fruits">
    <div *dxTemplate="let fruit of 'item'; let i = index">
        <span>[{{i}}] </span>
        <b>{{fruit.name}}</b><br />
        <p>{{fruit.count}}</p>
    </div>
</dx-list>
import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    fruits = [
        { name: "Apples", count: 10 },
        { name: "Oranges", count: 12 },
        { name: "Lemons", count: 15 },
        { name: "Pears", count: 20 },
        { name: "Pineapples", count: 3 }
    ];
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})
AngularJS
HTML
JavaScript
<div ng-controller="DemoController">
    <div dx-list="{
        dataSource: fruits
    }" dx-item-alias="fruit">
        <div data-options="dxTemplate: { name: 'item' }">
            <span>[{{$index}}] </span>
            <b>{{fruit.name}}</b><br />
            <p>{{fruit.count}}</p>
        </div>
    </div>
</div>
angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.fruits = [
            { name: "Apples", count: 10 },
            { name: "Oranges", count: 12 },
            { name: "Lemons", count: 15 },
            { name: "Pears", count: 20 },
            { name: "Pineapples", count: 3 }
        ];
    });
Knockout
HTML
JavaScript
<div data-bind="dxList: { dataSource: fruits }">
    <div data-options="dxTemplate: { name: 'item' }">
        [<span data-bind="text: $index"></span>]
        <b data-bind="text: name"></b><br />
        <p data-bind="text: count"></p>
    </div>
</div>
var viewModel = {
    fruits: [
        { name: "Apples", count: 10 },
        { name: "Oranges", count: 12 },
        { name: "Lemons", count: 15 },
        { name: "Pears", count: 20 },
        { name: "Pineapples", count: 3 }
    ]
};

ko.applyBindings(viewModel);

In AngularJs and Knockout apps, you can define different templates intended for different devices. Specify the device object's fields as the dxTemplate's markup options to set a target device for a template.

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>
See Also