JavaScript/jQuery Markup Components Item

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.