jQuery/JS Common - Object Structures - template

To use a template, pass a value with one of the following types to a widget's ...Template option:

• String
  Specifies the name of the template to use if the template is defined within a widget using the dxTemplate markup component.

  Angular

  HTML

  TypeScript

  <dx-list ...
      itemTemplate="listItem">
      <div *dxTemplate="let itemData of 'listItem'; let itemIndex = index">
          {{itemIndex}} - {{itemData.itemProperty}}
      </div>
  </dx-list>

  import { DxListModule } from "devextreme-angular";
  // ...
  export class AppComponent {
      // ...
  }
  @NgModule({
      imports: [
          // ...
          DxListModule
      ],
      // ...
  })

  AngularJS

  HTML

  JavaScript

  <div ng-controller="DemoController">
      <div dx-list="{
          ...
          itemTemplate: 'listItem'
      }" dx-item-alias="itemData">
          <div data-options="dxTemplate: { name: 'listItem' }">
              {{$index}} - {{itemData.itemProperty}}
          </div>
      </div>
  </div>

  angular.module('DemoApp', ['dx'])
      .controller('DemoController', function ($scope) {
          // ...
      });

  Knockout

  HTML

  JavaScript

  <div data-bind="dxList: {
      ...
      itemTemplate: 'listItem'
  }">
      <div data-options="dxTemplate: { name: 'listItem' }">
          <span data-bind="text: $index"></span> - <span data-bind="text: itemProperty"></span>
      </div>
  </div>

  var viewModel = {
      // ...
  };
  
  ko.applyBindings(viewModel);

• DOM Node or jQuery
  Specifies the page element containing the template. Useful for referring to external templates when using a 3rd-party template engine.

  JavaScript

  HTML

  DevExpress.ui.setTemplateEngine("underscore");
  
  $(function() {
      $("#list").dxList({
          // ...
          itemTemplate: $("#itemTemplate")
      });
  })

  <div id="list"></div>
  <script type="text/html" id="itemTemplate">
      <!-- your Underscore template -->
  </script>

• Function
  Combines the HTML markup using jQuery DOM manipulation methods:

  JavaScript

  $(function() {
      $("#listContainer").dxList({
          // ...
          itemTemplate: function (itemData, itemIndex, element) {
              element.append(
                  $("<span>").text(itemIndex) - $("<span>").text(itemData.itemProperty)
              )
          }
      });
  });

See Also

• Templates