Customize ListView with dynamic tags in EJ2 TypeScript ListView control

28 Jan 202520 minutes to read

You can customize the ListView items using the template property. Here, dynamic tags are added or removed in the list item from another ListView. Refer to the following steps to achieve this.

  • Render the ListView with a data source, and add a button element with each list item of the ListView on the actionComplete event. Refer to the following code sample of the 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 a dynamic ListView with the required properties that hold the tags of the parent ListView, and bind the select event (triggers when a list item is selected) to add the selected item value as tags into the 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 the created event.

  • Bind the click event to the 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 them. Refer to the following code sample.
//Method to remove the list item
function removeTag() {
    this.parentNode.parentNode.remove();
}
import { ListView, SelectEventArgs } from '@syncfusion/ej2-lists';
import { Button } from '@syncfusion/ej2-buttons';
import { Dialog } from '@syncfusion/ej2-popups';
import { enableRipple, MouseEventArgs } from '@syncfusion/ej2-base';
enableRipple(false);

//Define customized template
let template: string = '<div><span class="templatetext">${Name} </span> <span class="designationstyle"><button id ="${Id}" class="e-but"></button></span></div>';
let data: { [key: string]: Object }[] = [{ "Id": "Brooke", "Name": "Brooke" },
{ "Id": "Claire", "Name": "Claire" },
{ "Id": "Erik", "Name": "Erik" },
{ "Id": "Grace", "Name": "Grace" },
{ "Id": "Jacob", "Name": "Jacob" }];

let listviewInstance: ListView = new 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 control
listviewInstance.appendTo('#templatelist');
//actionComplete event for the first ListView
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);
    }
}

//The click event for rendered button
for (let i: number = 0; i < data.length; i++) {
    (document.getElementById(data[i].Id as string) as HTMLElement).addEventListener("click", (e: MouseEventArgs) => {
        renderDialog((e.currentTarget as HTMLElement).id);
    });

}

let brookeTag: { [key: string]: Object }[] = [{ "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" },
];
let claireTag: { [key: string]: Object }[] = [{ "id": "list21", "Name": "Songs" },
{ "id": "list22", "Name": "Bestselling Albums" },
{ "id": "list23", "Name": "New Releases" },
{ "id": "list24", "Name": "Bestselling Songs" },
];
let erikTag: { [key: string]: Object }[] = [{ "id": "list31", "Name": "Artwork" },
{ "id": "list32", "Name": "Abstract" },
{ "id": "list33", "Name": "Acrylic Mediums" },
{ "id": "list34", "Name": "Creative Acrylic" },
{ "id": "list35", "Name": "Canvas Art" }
];
let graceTag: { [key: string]: Object }[] = [{ "id": "list41", "Name": "Rock" },
{ "id": "list42", "Name": "Gospel" },
{ "id": "list43", "Name": "Latin Music" },
{ "id": "list44", "Name": "Jazz" },
];
let jacobTag: { [key: string]: Object }[] = [{ "id": "list51", "Name": "100 Albums - $5 Each" },
{ "id": "list52", "Name": "Hip-Hop and R&B Sale" },
{ "id": "list53", "Name": "CD Deals" }
];
let datasource: { [key: string]: { [key: string]: Object }[] } = { "Brooke": brookeTag, "Claire": claireTag, "Erik": erikTag, "Grace": graceTag, "Jacob": jacobTag };

//Initialize the ListView that is needed to append inside the dialog
let listObj: ListView = new ListView({
    showHeader: true,
    headerTitle: 'Favorite',
    width: '200px',
    dataSource: datasource.Brooke,
    fields: { text: 'Name' },
    select: addTag
});
const element = document.querySelector('.e-add-icon');
//Initialize the dialog control
let dialog: Dialog = new Dialog({
    width: '200px',
    content: '<div id="list"></div>',
    animationSettings: { effect: 'None' },
    visible: false,
    created: createList,
    showCloseIcon: true,
    position: { 
        X: (element && element.getBoundingClientRect ? element.getBoundingClientRect().left : 0) + 50, 
        Y: (element && element.getBoundingClientRect ? element.getBoundingClientRect().top : 0) - 5 
    }
});
//Render the initialized dialog control
dialog.appendTo('#dialog');

//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();
    }

}

//Created event for dialog
function createList() {
    let listElem: any = (document.getElementById('dialog') as HTMLElement).querySelector("#list");
    listObj.appendTo(listElem);
}

//Select event for ListView that is rendered inside the dialog
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);
}

//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/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/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="sample">
            <!-- ListView element -->
            <div id="templatelist" tabindex="1"></div>
            <!-- Dialog element -->
            <div id="dialog"></div>
        </div>
    </div>
    <style>
        #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;
        }
    </style>
</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%;
}