Vue Common - Object Structures - template
jQuery
Templates are passed as properties that end with ...Template. Each template has access to the following parameters:
Angular
Templates are passed as properties that end with ...Template. Each template has access to the following parameters:
Vue
Templates are passed as properties that end with ...Template. Each template has access to the following parameters:
React
Templates are passed as properties that end with ...Render or ...Component. 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:
jQuery
$(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); } }); });
Angular
<dx-list [items]="listData" itemTemplate="list-item"> <div *dxTemplate="let data of 'list-item'; let index = index"> {{index}} - {{data.itemProperty}} </div> </dx-list>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { listData = [ { itemProperty: "someValue" }, // ... ] }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxListModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxListModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
<template> <DxList :items="listData" item-template="list-item"> <template #list-item="{ data, index }"> {{ index }} - {{ data.itemProperty }} </template> </DxList> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxList from 'devextreme-vue/list'; export default { components: { DxList }, data() { return { listData: [ { itemProperty: 'someValue' }, // ... ] } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import List from 'devextreme-react/list'; const renderListItem = (data, index) => { return ( <div>{index} - {data.itemProperty}</div> ); } class App extends React.Component { listData = [ { itemProperty: 'someValue' }, // ... ]; render() { return ( <List items={this.listData} itemRender={renderListItem} /> ); } } export default App;
Collection UI components also support templates for individual items. Do not specify the UI component's dataSource property if you use individual templates.
jQuery
$(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" }) ) } }] }); });
Angular
Declare named templates within the component's markup but outside the templated element. Non-named templates should be declared inside the templated element.
<dx-list> <dxi-item> <i>Item 1</i> </dxi-item> <dxi-item> <b>Item 2</b> </dxi-item> <dxi-item> <div *dxTemplate> Item with a nested component <dx-button text="Click me"></dx-button> </div> </dxi-item> </dx-list>
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxListModule, DxButtonModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxListModule, DxButtonModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
Declare named templates within the component's markup but outside the templated element. Non-named templates should be declared inside the templated element.
<template> <DxList> <DxItem> <template #default> <i>Item 1</i> </template> </DxItem> <DxItem> <template #default> <i>Item 2</i> </template> </DxItem> <DxItem> <template #default> <div> Item with a nested component <DxButton text="Click me" /> </div> </template> </DxItem> </DxList> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxList, { DxItem } from 'devextreme-vue/list'; import DxButton from 'devextreme-vue/button'; export default { components: { DxList, DxItem, DxButton } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import List, { Item } from 'devextreme-react/list'; import Button from 'devextreme-react/button'; class App extends React.Component { render() { return ( <List> <Item> <i>Item 1</i> </Item> <Item> <i>Item 2</i> </Item> <Item> Item with a nested component <Button text="Click me" /> </Item> </List> ); } } export default App;
Angular
See Also
Vue
See Also
React
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.