Customize listview with dynamic tags in JavaScript (ES5) ListView control

23 Mar 2023 / 5 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 actionComplete event. 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 select event (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 created event.
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();
}

Source

Preview

index.js

index.html

index.css

//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="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-popups/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>

#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}

#sample{
    padding: 40px;
}

.advanced-option-list {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: 4px;
    overflow: auto;
}

.advanced-option {
    border: 1px solid #0078d7;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    padding: 0 20px 0 5px;
    margin: 0 3px 1px 0;
    float: left;
    position: relative;
    background: white;
    line-height: 21px;
}

.advanced-option .label {
    color: #0078d7;
    font-size: 10px;
}

.advanced-option .delete {
    background: url(https://research.isg-one.com/Assets/img/Content/icn/tiny-del.png) right center no-repeat;
    padding-left: 10px;
    padding-top: 2px;
    right: 0;
    position: absolute;
    top: 1px;
    cursor: pointer;
    height: 16px;
    width: 30px;
}

#templatelist {
    max-width: 350px;
    margin: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}

#templatelist .designationstyle {
    float: right;
    position: relative;
    right: 10px;
}

.cont-bg {
    font-size: 17px;
    height: 46px;
    padding-top: 10px;
    width: 100%;
}

.e-add-icon::before {
    content: '\e823';
}

#templatelist .e-list-item {
    height: auto;
    padding: 11px 16px;
}

.e-dialog .e-dlg-header-content+.e-dlg-content {
    margin-top: -18px;
}

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!