jQuery/JS Common - Object Structures - template
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 ofdata
, 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:
- $(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.
- $(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
If you have technical questions, please create a support ticket in the DevExpress Support Center.