jQuery/JS Common - Object Structures - template

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

Templates are passed as properties that end with ...Template (in jQuery, Angular, and Vue) or ...Render/...Component (in React).

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. 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 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"
  • })
  • )
  • }
  • }]
  • });
  • });
See Also