jQuery/JS Common - Object Structures - template

A template notation used to specify templates for UI component elements.

import { template } from "devextreme/common"

Templates are passed as properties that end with ...Template. Each template has access to the following parameters:

  • data
    A data source object or an object with fields specific to a particular template. For information on the contents of data, refer to the Template Data section of the template's API reference article.

  • index
    A zero-based index of the item in the collection. Can be available only in collection UI component templates.

  • element
    A jQuery element that represents the UI component element being customized. Available only if you use jQuery.

The following code shows how to declare a template and use these parameters. This code declares an itemTemplate for the List UI component:

index.js
  • $(function() {
  • $("#listContainer").dxList({
  • items: [
  • { itemProperty: "someValue" },
  • // ...
  • ],
  • itemTemplate: function (data, index, element) {
  • return index + " - " + data.itemProperty;
  •  
  • // ===== or using the "element" parameter =====
  • const $item = $("<div>").text(
  • index + " - " + data.itemProperty
  • );
  • element.append($item);
  • }
  • });
  • });

Collection UI components are components that include the items property. These components also support templates for individual items. Do not specify the UI component's dataSource property if you use individual templates.

index.js
  • $(function() {
  • $("#listContainer").dxList({
  • items: [{
  • template: function () {
  • return $("<i>").text("Item 1")
  • }
  • }, {
  • template: function () {
  • return $("<b>").text("Item 2")
  • }
  • },{
  • template: function () {
  • return $("<div>").append(
  • $("<span>").text("Item with nested component"),
  • $("<div>").dxButton({
  • text: "Click me"
  • })
  • )
  • }
  • }]
  • });
  • });