Load list items in child list dynamically in React ListView component

24 Jun 2022 / 3 minutes to read

To load list items in child list dynamically, push the new list item data into the existing dataSource using the select event.

Refer to the following steps to load list item into the child list:

Initially, render the ListView with the required data source.
Bind the select event that triggers selecting list item in the ListView component. By using the select event, you can push the new list item to the child list of the data source on specifying its item index. Item index can be obtained from the SelectEventArgs of the select event.

Source

Preview

App.jsx

index.jsx

index.html

index.css

App.tsx

index.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        // define the array of Json
        this.data = [
            {
                id: "01",
                text: "Music",
                icon: "folder",
                child: [{ id: "01-01", text: "Gouttes.mp3", icon: "file" }]
            },
            {
                id: "02",
                text: "Videos",
                icon: "folder",
                child: [
                    { id: "02-01", text: "Naturals.mp4", icon: "file" },
                    { id: "02-02", text: "Wild.mpeg", icon: "file" }
                ]
            },
            {
                id: "03",
                text: "Documents",
                icon: "folder",
                child: [
                    { id: "03-01", text: "Environment Pollution.docx", icon: "file" },
                    { id: "03-02", text: "Global Water, Sanitation, & Hygiene.docx", icon: "file" },
                    { id: "03-03", text: "Global Warming.ppt", icon: "file" },
                    { id: "03-04", text: "Social Network.pdf", icon: "file" },
                    { id: "03-05", text: "Youth Empowerment.pdf", icon: "file" }
                ]
            },
            {
                id: "04",
                text: "Pictures",
                icon: "folder",
                child: [
                    {
                        id: "04-01",
                        text: "Camera Roll",
                        icon: "folder",
                        child: [
                            { id: "04-01-01", text: "WIN_20160726_094117.JPG", icon: "file" },
                            { id: "04-01-02", text: "WIN_20160726_094118.JPG", icon: "file" },
                            { id: "04-01-03", text: "WIN_20160726_094119.JPG", icon: "file" }
                        ]
                    },
                    {
                        id: "04-02",
                        text: "Wind.jpg",
                        icon: "file"
                    },
                    {
                        id: "04-02",
                        text: "Stone.jpg",
                        icon: "file"
                    },
                    {
                        id: "04-02",
                        text: "Home.jpg",
                        icon: "file"
                    },
                    {
                        id: "04-02",
                        text: "Bridge.png",
                        icon: "file"
                    }
                ]
            },
            {
                id: "05",
                text: "Downloads",
                icon: "folder",
                child: [
                    { id: "05-01", text: "UI-Guide.pdf", icon: "file" },
                    { id: "05-02", text: "Tutorials.zip", icon: "file" },
                    { id: "05-03", text: "Game.exe", icon: "file" },
                    { id: "05-04", text: "TypeScript.7z", icon: "file" }
                ]
            }
        ];
        this.fields = { iconCss: "icon", tooltip: "text" };
    }
    onSelect(args) {
        this.data[args.index].child.push({
            id: "01-02",
            text: "Newly Added File",
            icon: "file",
            htmlAttributes: { role: "li", class: "list" }
        });
    }
    render() {
        return (<div>
    <ListViewComponent id="listview" dataSource={this.data} fields={this.fields} headerTitle="Folders" showIcon={true} showHeader={true} select={this.onSelect.bind(this)}/>
  </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));

<!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.1.58/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-lists/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>

#listview {
  display: block;
  max-width: 400px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
}


#listview.e-listview .e-list-icon {
  height: 24px;
  width: 30px;
}

.folder, .file  {
  background: url('https://ej2.syncfusion.com/demos/src/listview/images/file_icons.png') no-repeat;
  background-size: 300%;
}

.folder{    
  background-position: -5px -461px;
}

.file {
  background-position: -5px -151px;
}
/* csslint ignore:start */

.list {
  color:deeppink !important;
}

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';

export default class App extends React.Component<{}, {}> {
  // define the array of Json
  private data: { [key: string]: Object }[] = [
{
  id: "01",
  text: "Music",
  icon: "folder",
  child: [{ id: "01-01", text: "Gouttes.mp3", icon: "file" }]
},
{
  id: "02",
  text: "Videos",
  icon: "folder",
  child: [
    { id: "02-01", text: "Naturals.mp4", icon: "file" },
    { id: "02-02", text: "Wild.mpeg", icon: "file" }
  ]
},
{
  id: "03",
  text: "Documents",
  icon: "folder",
  child: [
    { id: "03-01", text: "Environment Pollution.docx", icon: "file" },
    { id: "03-02", text: "Global Water, Sanitation, & Hygiene.docx", icon: "file" },
    { id: "03-03", text: "Global Warming.ppt", icon: "file" },
    { id: "03-04", text: "Social Network.pdf", icon: "file" },
    { id: "03-05", text: "Youth Empowerment.pdf", icon: "file" }
  ]
},
{
  id: "04",
  text: "Pictures",
  icon: "folder",
  child: [
    {
      id: "04-01",
      text: "Camera Roll",
      icon: "folder",
      child: [
        { id: "04-01-01", text: "WIN_20160726_094117.JPG", icon: "file" },
        { id: "04-01-02", text: "WIN_20160726_094118.JPG", icon: "file" },
        { id: "04-01-03", text: "WIN_20160726_094119.JPG", icon: "file" }
      ]
    },
    {
      id: "04-02",
      text: "Wind.jpg",
      icon: "file"
    },
    {
      id: "04-02",
      text: "Stone.jpg",
      icon: "file"
    },
    {
      id: "04-02",
      text: "Home.jpg",
      icon: "file"
    },
    {
      id: "04-02",
      text: "Bridge.png",
      icon: "file"
    }
  ]
},
{
  id: "05",
  text: "Downloads",
  icon: "folder",
  child: [
    { id: "05-01", text: "UI-Guide.pdf", icon: "file" },
    { id: "05-02", text: "Tutorials.zip", icon: "file" },
    { id: "05-03", text: "Game.exe", icon: "file" },
    { id: "05-04", text: "TypeScript.7z", icon: "file" }
  ]
}
  ];
  private fields: { [key: string]: Object } = { iconCss: "icon", tooltip: "text" };

  public onSelect(args: SelectEventArgs) {
(this.data[args.index].child as any[]).push({
  id: "01-02",
  text: "Newly Added File",
  icon: "file",
  htmlAttributes: { role: "li", class: "list" }
});
  }

  render() {
return (
  <div>
    <ListViewComponent
      id="listview"
      dataSource={this.data}
      fields={this.fields}
      headerTitle="Folders"
      showIcon={true}
      showHeader={true}
      select={this.onSelect.bind(this) as any}
    />
  </div>
);
  }
}

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

Please provide additional information

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