Add and remove list items from listview in EJ2 TypeScript Listview control
8 Aug 20235 minutes to read
You can add or remove list items from the ListView control using the addItem
and removeItem
methods. Refer to the following steps to add or remove a list item.
-
Render the ListView with data source, and use the template property to append the delete icon for each list item. Also, bind the click event for the delete icon using the actionComplete handler.
-
Render the Add Item button, and bind the click event. On the click event handler, pass data with random id to the
addItem
method to add a new list item on clicking the Add Item button. -
Bind the click handler to the delete icon created in step 1. Within the click event, remove the list item by passing the delete icon list item to
removeItem
method.
import { ListView } from "@syncfusion/ej2-lists";
import { Button } from "@syncfusion/ej2-buttons";
import { MouseEventArgs } from "@syncfusion/ej2-base";
//Define an array of JSON data
let data: { [key: string]: Object }[] = [
{ text: "Hennessey Venom", id: "1", icon: "delete-icon" },
{ text: "Bugatti Chiron", id: "2", icon: "delete-icon" },
{ text: "Bugatti Veyron Super Sport", id: "3", icon: "delete-icon" },
{ text: "Aston Martin One- 77", id: "4", icon: "delete-icon" },
{ text: "Jaguar XJ220", id: "list-5", icon: "delete-icon" },
{ text: "McLaren P1", id: "6", icon: "delete-icon" }
];
//Initialize the ListView control
let listviewInstance: ListView = new ListView({
//Set the dataSource property
dataSource: data,
//Map the appropriate columns to the fields property
fields: { text: "text", iconCss: "icon" },
//Set the template for list items
template: "<div class='text-content'> ${text} <span class = 'delete-icon'></span> </div>",
//Event handler to bind the click event for delete icon
actionComplete: onComplete
});
//Render the initialized ListView
listviewInstance.appendTo("#sample-list-flat");
//Initialize the Button control.
let button: Button = new Button();
//Render the initialized button
button.appendTo("#btn");
//Event handler to add the list item on button click
document.getElementById("btn").onclick = () => {
let data: { [key: string]: Object } = {
text: "Koenigsegg - " + (Math.random() * 1000).toFixed(0),
id: (Math.random() * 1000).toFixed(0).toString(),
icon: "delete-icon"
};
listviewInstance.addItem([data]);
onComplete();
};
//Method for actionComplete handler
function onComplete() {
let iconEle: HTMLCollection = document.getElementsByClassName("delete-icon");
//Event handler to bind the click event for delete icon
Array.prototype.forEach.call(iconEle, (element: HTMLElement) => {
element.addEventListener("click", deleteItem.bind(this));
});
}
//Method to delete the list item
function deleteItem(args: MouseEventArgs) {
args.stopPropagation();
let liItem: HTMLElement = (args.target as HTMLElement).parentElement.parentElement;
listviewInstance.removeItem(liItem);
onComplete();
}
<!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/23.1.36/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/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="sample-list-flat"></div>
<button id="btn"> Add Item </button>
</div>
</body>
</html>