Customizing templates in EJ2 TypeScript Listview control
8 May 202317 minutes to read
The ListView control is designed to customize list items, group title and header title. It uses Essential JS2 Template engine to render the elements.
Header template
ListView header can be customized with the help of the headerTemplate
property.
To customize header template in your application, set your customized template string to headerTemplate
property along with showHeader
property as true
to display the ListView header.
let listviewInstance: ListView = new ListView({
data: listData,
headerTemplate: '<div class="header-content"><span>Header</span></div>',
showHeader: true
})
In the following example, we have rendered Listview with customized header which contains search, add and sort buttons.
import { ListView } from '@syncfusion/ej2-lists';
import { Button } from '@syncfusion/ej2-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
let fruitsdata: { [key: string]: Object }[] = [
{ text: 'Date', id: '1', imgUrl: './dates.jpg' },
{ text: 'Fig', id: '2', imgUrl: './fig.jpg' },
{ text: 'Apple', id: '3', imgUrl: './apple.png' },
{ text: 'Apricot', id: '4', imgUrl: './apricot.jpg' },
{ text: 'Grape', id: '5', imgUrl: './grape.jpg' },
{ text: 'Strawberry', id: '6', imgUrl: './strawberry.jpg' },
{ text: 'Pineapple', id: '7', imgUrl: './pineapple.jpg' },
{ text: 'Melon', id: '8', imgUrl: './melon.jpg' },
{ text: 'Lemon', id: '9', imgUrl: './lemon.jpg' },
{ text: 'Cherry', id: '10', imgUrl: './cherry.jpg' },
];
let listViewInstance: any = new ListView({
dataSource: fruitsdata,
headerTemplate: '<div class="headerContainer"><span class="fruitHeader">Fruits</span><button id="search"></button><button id="add"></button><button id="sort"></button></div>',
showHeader: true,
actionComplete: renderHeaderButtons
});
listViewInstance.appendTo('#element');
function renderHeaderButtons() {
['search', 'sort', 'add'].forEach((item: string) => {
new Button({ iconCss: `e-icons e-${item}-icon`, cssClass: 'e-small e-round', isPrimary: true }, `#${item}`)
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 for ListView </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for ListView UI Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
Template
ListView items can be customized with the help of the template
property.
To customize list items in your application, set your customized template string to template
property.
let listviewInstance: ListView = new ListView({
data: listData,
template: '<div class="list-tem"><span>${text}</span></div>',
})
We provided the following built-in CSS classes to customize the list-items. Refer to the following table.
CSS class | Description |
---|---|
e-list-template, e-list-wrapper | These classes are used to differentiate normal and template rendering, which are mandatory for template rendering. The e-list-template class should be added to the root of the ListView element and e-list-wrapper class should be added to the template element wrapper new ListView({ dataSource: data, cssClass: 'e-list-template', template: '<div class=" e-list-wrapper "></div>'}, '#list');
|
e-list-content | This class is used to align list content and it should be added to the content element <div class="e-list-wrapper"> <span class="e-list-content">ListItem</span> </div>
|
e-list-avatar | This class is used for avatar customization. It should be added to the template element wrapper. After adding it, we can customize our element with Avatar classes <div class="e-list-wrapper e-list-avatar "> <span class="e-avatar e-avatar-circle">MR</span> <span class="e-list-content">ListItem</span> </div>
|
e-list-avatar-right | This class is used to align avatar to right side of the list item. It should be added to the template element wrapper. After adding it, we can customize our element with Avatar classes <div class="e-list-wrapper e-list-avatar-right "> <span class="e-list-content">ListItem</span> <span class="e-avatar e-avatar-circle">MR</span> </div>
|
e-list-badge | This class is used for badge customization .It should be added to the template element wrapper. After adding it, we can customize our element with Badge classes <div class="e-list-wrapper e-list-badge "> <span class="e-list-content">ListItem</span> <span class="e-badge e-badge-primary">MR</span> </div>
|
e-list-multi-line | This class is used for multi-line customization. It should be added to the template element wrapper. After adding it, we can customize List item’s header and description <div class="e-list-wrapper e-list-multi-line "> <span class="e-list-content">ListItem</span> </div>
|
e-list-item-header | This class is used to align a list header and it should be added to the header element along with the multi-line class <div class="e-list-wrapper e-list-multi-line "> <span class="e-list-item-header">ListItem Header</span> <span class="e-list-content">ListItem</span> </div>
|
In the following example, we have customized list items with built-in CSS classes.
import { ListView } from "@syncfusion/ej2-lists";
let template: string = '<div class="e-list-wrapper e-list-multi-line e-list-avatar">' +
'${if(avatar!=="")}' +
'<span class="e-avatar e-avatar-circle">${avatar}</span>' +
'${else}' +
'<span class="${pic} e-avatar e-avatar-circle"> </span>' +
'${/if}' +
'<span class="e-list-item-header">${text}</span>' +
'<span class="e-list-content">${contact}</span>' +
'</div>';
//Define an array of JSON data
let dataSource: any = [
{
text: "Jenifer",
contact: "(206) 555-985774",
id: "1",
avatar: "",
pic: "pic01"
},
{ text: "Amenda", contact: "(206) 555-3412", id: "2", avatar: "A", pic: "" },
{
text: "Isabella",
contact: "(206) 555-8122",
id: "4",
avatar: "",
pic: "pic02"
},
{
text: "William ",
contact: "(206) 555-9482",
id: "5",
avatar: "W",
pic: ""
},
{
text: "Jacob",
contact: "(71) 555-4848",
id: "6",
avatar: "",
pic: "pic04"
},
{ text: "Matthew", contact: "(71) 555-7773", id: "7", avatar: "M", pic: "" },
{
text: "Oliver",
contact: "(71) 555-5598",
id: "8",
avatar: "",
pic: "pic03"
},
{
text: "Charlotte",
contact: "(206) 555-1189",
id: "9",
avatar: "C",
pic: ""
}
];
// Initialize the ListView control
let listObj: ListView = new ListView({
//Set the defined data to the dataSource property
dataSource: dataSource,
//Map the appropriate columns to the fields property
fields: { text: "text" },
//Set the width of the ListView
width: "350px",
//Enable the header of the ListView
showHeader: true,
//Set the header title
headerTitle: "Contacts",
//set cssClass for template customization
cssClass: 'e-list-template',
//Set the customized template
template: template,
sortOrder: "Ascending"
});
//Render the initialized ListView control
listObj.appendTo("#List");
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 for ListView </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for ListView UI Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-layouts/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id="List" tabindex="1"></div>
</div>
</body>
</html>
Group template
ListView group header can be customized with the help of the groupTemplate
property.
To customize the group template in your application, set your customized template string to groupTemplate
property.
let listviewInstance: ListView = new ListView({
data: listData,
groupTemplate: '<div class="group-header"><span>${items[0].category}</span></div>',
})
In the following example, we have grouped Listview based on the category. The category of each list item should be mapped with groupBy
field of the data. We have also displayed grouped list items count in the group list header.
import { ListView } from '@syncfusion/ej2-lists';
let template: string = '<div class="e-list-wrapper e-list-multi-line e-list-avatar">' +
'<img class="e-avatar e-avatar-circle" src=${image} style="background:#BCBCBC" />' +
'<span class="e-list-item-header">${Name}</span>' +
'<span class="e-list-content">${contact}</span>' +
'</div>';
//Define an array of JSON data
let dataSource = [
{ Name: 'Nancy', contact:'(206) 555-985774', id: '1', image: 'https://ej2.syncfusion.com/demos/src/grid/images/1.png', category: 'Experience'},
{ Name: 'Janet', contact: '(206) 555-3412', id: '2', image: 'https://ej2.syncfusion.com/demos/src/grid/images/3.png', category: 'Fresher' },
{ Name: 'Margaret', contact:'(206) 555-8122', id:'4', image: 'https://ej2.syncfusion.com/demos/src/grid/images/4.png', category: 'Experience' },
{ Name: 'Andrew ', contact:'(206) 555-9482', id: '5', image: 'https://ej2.syncfusion.com/demos/src/grid/images/2.png', category: 'Experience'},
{ Name: 'Steven', contact:'(71) 555-4848', id: '6', image: 'https://ej2.syncfusion.com/demos/src/grid/images/5.png', category: 'Fresher' },
{ Name: 'Michael', contact:'(71) 555-7773', id: '7', image: 'https://ej2.syncfusion.com/demos/src/grid/images/6.png', category: 'Experience' },
{ Name: 'Robert', contact:'(71) 555-5598', id: '8', image: 'https://ej2.syncfusion.com/demos/src/grid/images/7.png', category: 'Fresher' },
{ Name: 'Laura', contact:'(206) 555-1189', id: '9', image: 'https://ej2.syncfusion.com/demos/src/grid/images/8.png', category: 'Experience' },
];
// Initialize the ListView control
let listObj: ListView = new ListView({
//Set the defined data to the data source property
dataSource: dataSource,
width: 350,
//Map the appropriate columns to the fields property
fields: { text: 'Name', groupBy: 'category' },
//set cssClass for template customization
cssClass: 'e-list-template',
//Set the customized template
template: template,
groupTemplate: '<div><span class="category">${items[0].category}</span> <span class="count"> ${items.length} Item(s)</span></div> '
});
//Render the initialized ListView control
listObj.appendTo('#List');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 for ListView </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for ListView UI Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-layouts/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id="container">
<div class="col-lg-12 control-section">
<!-- ListView element -->
<div id="List" tabindex="1">
</div>
</div>
</div>
</body>
</html>
We can also render other EJ2 controls in ListView templates by rendering that controls on
actionComplete
event. Refer to the below code snippet.
let listviewInstance: ListView = new ListView({
data: listData,
template: '<div><span>${text}</span><button id="delete"></button></div>',
actionComplete: () => {
new Button({iconCss: 'e-icons e-delete-icon' cssClass: 'e-small e-round', isPrimary: true }, '#delete')
}
})