React Common - Object Structures - template

A template notation used to specify templates for widget elements.

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.

  • 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