Customize listview with dynamic tags in EJ2 JavaScript Listview control
8 Aug 202313 minutes to read
You can customize the ListView items using the template property. Here, the dynamic tags are added and removed in the list item from another ListView. Refer to the following steps to achieve this.
- Render the ListView with data source, and add button element with each list item of ListView on
actionCompleteevent. Refer to the following code sample of actionComplete event.
// The actionComplete event for first ListView to add the button
function addButton() {
let buttonObj: { [key: string]: Object } = { obj: Button, prop: { iconCss: 'e-icons e-add-icon', cssClass: 'e-small e-round' } };
let ele: HTMLCollection = document.getElementsByClassName("e-but");
for (let i: number = 0; i < ele.length; i++) {
buttonObj.obj = new Button(buttonObj.prop);
(buttonObj.obj as Button).appendTo(ele[i] as HTMLElement);
}
}- Initialize dynamic ListView with required property that holds the tags of parent ListView, and bind the
selectevent (triggers when the list item is selected), in which you can get and add the selected item value as tags into parent
ListView. Refer to the following code sample.
//Select the event that is is rendered inside dialog for ListView
function addTag(e: SelectEventArgs) {
let listTag: HTMLSpanElement = document.createElement('span');
listTag.className = 'advanced-option';
let labelElem: HTMLSpanElement = document.createElement('span');
labelElem.className = 'label';
let deleteElem: HTMLSpanElement = document.createElement('span');
deleteElem.className = 'delete';
deleteElem.onclick = removeTag;
labelElem.innerHTML = e.text;
listTag.appendChild(labelElem);
listTag.appendChild(deleteElem);
let tag: HTMLSpanElement = document.createElement('span');
tag.className = 'advanced-option-list';
tag.appendChild(listTag);
listviewInstance.element.querySelector('.e-active').appendChild(tag);
}-
Render the dialog control with empty content and append the created dynamic ListView object to the dialog on
createdevent. -
Bind the click event for button icon (+) to update the ListView data source with tags, and open the dialog with this dynamic ListView. Refer to the following code sample.
//Method to hide/show the dialog and update the ListView data source
function renderDialog(id: string): void {
if (document.getElementsByClassName('e-popup-open').length != 0) {
dialog.hide();
}
else {
listObj.dataSource = datasource[id];
listObj.dataBind();
dialog.show();
}
}- Bind the click event with added dynamic tags to remove it. Refer to the following code sample.
//Method to remove the list item
function removeTag() {
this.parentNode.parentNode.remove();
}//Define customized template
var template = '<div><span class="templatetext">${Name} </span> <span class="designationstyle"><button id ="${Id}" class="e-but"></button></span></div>';
var data = [{ "Id": "Brooke", "Name": "Brooke" },
{ "Id": "Claire", "Name": "Claire" },
{ "Id": "Erik", "Name": "Erik" },
{ "Id": "Grace", "Name": "Grace" },
{ "Id": "Jacob", "Name": "Jacob" }];
var listviewInstance = new ej.lists.ListView({
//Set defined data to the dataSource property
dataSource: data,
//Set defined customized template
template: template,
//Set the fields property
fields: { text: 'Name' },
//Set the width to the ListView
width: 350,
//Bind the event to customize the ListView
actionComplete: addButton
});
//Render the initialized ListView component
listviewInstance.appendTo('#templatelist');
//actionComplete event for the first ListView
function addButton(args) {
var buttonObj = { obj: ej.buttons.Button, prop: { iconCss: 'e-icons e-add-icon', cssClass: 'e-small e-round' } };
var ele = document.getElementsByClassName("e-but");
for (var i_1 = 0; i_1 < ele.length; i_1++) {
buttonObj.obj = new ej.buttons.Button(buttonObj.prop);
buttonObj.obj.appendTo(ele[i_1]);
}
}
//The click event for rendered button
for (var i = 0; i < data.length; i++) {
document.getElementById(data[i].Id).addEventListener("click", function (e) {
renderDialog(e.currentTarget.id);
});
}
var brookeTag = [{ "id": "list11", "Name": "Discover Music" },
{ "id": "list12", "Name": "Sales and Events" },
{ "id": "list13", "Name": "Categories" },
{ "id": "list14", "Name": "MP3 Albums" },
{ "id": "list15", "Name": "More in Music" },
];
var claireTag = [{ "id": "list21", "Name": "Songs" },
{ "id": "list22", "Name": "Bestselling Albums" },
{ "id": "list23", "Name": "New Releases" },
{ "id": "list24", "Name": "Bestselling Songs" },
];
var erikTag = [{ "id": "list31", "Name": "Artwork" },
{ "id": "list32", "Name": "Abstract" },
{ "id": "list33", "Name": "Acrylic Mediums" },
{ "id": "list34", "Name": "Creative Acrylic" },
{ "id": "list35", "Name": "Canvas Art" }
];
var graceTag = [{ "id": "list41", "Name": "Rock" },
{ "id": "list42", "Name": "Gospel" },
{ "id": "list43", "Name": "Latin Music" },
{ "id": "list44", "Name": "Jazz" },
];
var jacobTag = [{ "id": "list51", "Name": "100 Albums - $5 Each" },
{ "id": "list52", "Name": "Hip-Hop and R&B Sale" },
{ "id": "list53", "Name": "CD Deals" }
];
var datasource = { "Brooke": brookeTag, "Claire": claireTag, "Erik": erikTag, "Grace": graceTag, "Jacob": jacobTag };
//Initialize the ListView that is needed to append inside the dialog
var listObj = new ej.lists.ListView({
showHeader: true,
headerTitle: 'Favorite',
width: '200px',
dataSource: datasource.Brooke,
fields: { text: 'Name' },
select: addTag
});
//Initialize the dialog component
var dialog = new ej.popups.Dialog({
width: '200px',
content: '<div id="list"></div>',
animationSettings: { effect: 'None' },
visible: false,
created: createList,
showCloseIcon: true,
position: { X: document.querySelector('.e-add-icon').getBoundingClientRect().left + 50, Y: document.querySelector('.e-add-icon').getBoundingClientRect().top - 5 }
});
//Render the initialized dialog component
dialog.appendTo('#dialog');
//Method to hide/show the dialog and update the ListView data source
function renderDialog(id) {
if (document.getElementsByClassName('e-popup-open').length != 0) {
dialog.hide();
}
else {
listObj.dataSource = datasource[id];
listObj.dataBind();
dialog.show();
}
}
//Created event for dialog
function createList(e) {
var listElem = document.getElementById('dialog').querySelector("#list");
listObj.appendTo(listElem);
}
//Select event for ListView that is rendered inside the dialog
function addTag(e) {
var listTag = document.createElement('span');
listTag.className = 'advanced-option';
var labelElem = document.createElement('span');
labelElem.className = 'label';
var deleteElem = document.createElement('span');
deleteElem.className = 'delete';
deleteElem.onclick = removeTag;
labelElem.innerHTML = e.text;
listTag.appendChild(labelElem);
listTag.appendChild(deleteElem);
var tag = document.createElement('span');
tag.className = 'advanced-option-list';
tag.appendChild(listTag);
listviewInstance.element.querySelector('.e-active').appendChild(tag);
}
//Method to remove the list item
function removeTag() {
this.parentNode.parentNode.remove();
}<!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/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="sample">
<!-- ListView element -->
<div id="templatelist" tabindex="1"></div>
<!-- Dialog element -->
<div id="dialog"></div>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>