Item

Specifies markup for a widget item.

Type:

Object

The dxItem component defines custom markup for a layout's or collection widget's item. The Default Item Template section of the widget describes each dxItem specified within the widget element and its configuration options.

  • 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.