React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Add and remove list items from ListView in React ListView component

30 Sep 2022 / 2 minutes to read

You can add or remove list items from the ListView component 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.
Source
Preview
App.jsx
index.jsx
index.html
index.css
App.tsx
index.tsx
Copied to clipboard
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.listviewInstance = null;
        // define the array of Json
        this.dataSource = [
            { 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" }
        ];
        this.fields = { text: "text", iconCss: "icon" };
    }
    listTemplate(data) {
        return (<div className="text-content">
    {data.text}
    <span className="delete-icon" onClick={this.deleteItem.bind(this)}/>
  </div>);
    }
    addItem() {
        let data = {
            text: "Koenigsegg - " + (Math.random() * 1000).toFixed(0),
            id: (Math.random() * 1000).toFixed(0).toString(),
            icon: "delete-icon"
        };
        this.listviewInstance.addItem([data]);
    }
    deleteItem(args) {
        args.stopPropagation();
        let liItem = args.target.closest('li');
        this.listviewInstance.removeItem(liItem);
    }
    render() {
        return (<div>
    <ListViewComponent id="sample-list" dataSource={this.dataSource} fields={this.fields} template={this.listTemplate.bind(this)} ref={listview => {
            this.listviewInstance = listview;
        }}/>
    <ButtonComponent id="btn" onClick={this.addItem.bind(this)}>
      Add Item
    </ButtonComponent>
  </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React 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 React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
    <div id='element' style="margin:0 auto; max-width:400px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
#container {
    visibility: hidden;
  }
  
  #loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
  }
  
  #sample-list {
  margin: 40px auto;
  max-width: 500px;
  }
  
  #btn {
  margin:40px auto;
  display:block;
  }
  /* csslint ignore:start */
  
  @font-face {
  font-family: "e-icon";
  src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tSfIAAAEoAAAAVmNtYXDnEOdVAAABiAAAADZnbHlmXOniGAAAAcgAAAFAaGVhZBC1AhkAAADQAAAANmhoZWEIUQQDAAAArAAAACRobXR4CAAAAAAAAYAAAAAIbG9jYQCgAAAAAAHAAAAABm1heHABDgCYAAABCAAAACBuYW1lv4Bt4QAAAwgAAAIZcG9zdJx8QW4AAAUkAAAAOwABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAApWcDV18PPPUACwQAAAAAANbRXpQAAAAA1tFelAAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAACAIwAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAAQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA5wD//wAA5wD//wAAAAEABAAAAAEAAAAAAAAAoAAAAAIAAAAAA/QD9AALAIsAAAEHFwcnByc3JzcXNwUfHz8fLx8PHgLuhIRrg4NrhIRrg4P9iQECAwQGBwcJCwsMDQ4PDxEREhMUFBUWFhcXFxkYGRkaGhkZGBkXFxcWFhUUFBMSEREPDw4NDAsLCQcHBgQDAgEBAgMEBgcHCQsLDA0ODw8RERITFBQVFhYXFxcZGBkZGhoZGRgZFxcXFhYVFBQTEhERDw8ODQwLCwkHBwYEAwICg4OGa4SEa4ODaoCE7hoZGRgZFxcXFhYVFBQTEhERDw8ODQwLCwkHBwYEAwIBAQIDBAYHBwkLCwwNDg8PERESExQUFRYWFxcXGRgZGRoaGRkYGRcXFxYWFRQUExIREQ8PDg0MCwsJBwcGBAMCAQECAwQGBwcJCwsMDQ4PDxEREhMUFBUWFhcXFxkYGRkAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAGAAEAAQAAAAAAAgAHAAcAAQAAAAAAAwAGAA4AAQAAAAAABAAGABQAAQAAAAAABQALABoAAQAAAAAABgAGACUAAQAAAAAACgAsACsAAQAAAAAACwASAFcAAwABBAkAAAACAGkAAwABBAkAAQAMAGsAAwABBAkAAgAOAHcAAwABBAkAAwAMAIUAAwABBAkABAAMAJEAAwABBAkABQAWAJ0AAwABBAkABgAMALMAAwABBAkACgBYAL8AAwABBAkACwAkARcgZGVsZXRlUmVndWxhcmRlbGV0ZWRlbGV0ZVZlcnNpb24gMS4wZGVsZXRlRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABkAGUAbABlAHQAZQBSAGUAZwB1AGwAYQByAGQAZQBsAGUAdABlAGQAZQBsAGUAdABlAFYAZQByAHMAaQBvAG4AIAAxAC4AMABkAGUAbABlAHQAZQBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAQIBAwARY2lyY2xlLWNsb3NlLS0tMDIAAAA=)
    format("truetype");
  font-weight: normal;
  font-style: normal;
  }
  
  /* csslint ignore:end */
  
  #sample-list .delete-icon::after {
  font-family: "e-icon";
  content: "\e700";
  float: right;
  cursor: pointer;
  }
Copied to clipboard
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

export default class App extends React.Component<{}, {}> {
private listviewInstance: ListViewComponent = null as any;

  listTemplate(data: any): JSX.Element {
return (
  <div className="text-content">
    {data.text}
    <span className="delete-icon" onClick={this.deleteItem.bind(this)} />
  </div>
);
  }
  // define the array of Json
  private dataSource: any = [
{ 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" }
  ];

  public fields: Object = { text: "text", iconCss: "icon" };

  addItem() {
let data = {
  text: "Koenigsegg - " + (Math.random() * 1000).toFixed(0),
  id: (Math.random() * 1000).toFixed(0).toString(),
  icon: "delete-icon"
};
this.listviewInstance.addItem([data]);
  }

  deleteItem(args: any) {
args.stopPropagation();
let liItem = args.target.closest('li');
this.listviewInstance.removeItem(liItem);
  }

  render() {
return (
  <div>
    <ListViewComponent
      id="sample-list"
      dataSource={this.dataSource}
      fields={this.fields}
      template={this.listTemplate.bind(this) as any}
      ref={listview => {
        this.listviewInstance = listview as any;
      }}
    />
    <ButtonComponent id="btn" onClick={this.addItem.bind(this)}>
      Add Item
    </ButtonComponent>
  </div>
);
  }
}

ReactDOM.render(<App />, document.getElementById('element'));
Previous
Next