Load list items in child list dynamically in React ListView component

23 Jan 202520 minutes to read

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

Follow these steps to load list items into the child list:

  1. Initially, render the ListView with the required data source.

  2. Bind the select event that triggers when selecting a list item in the ListView component. Using the select event, you can push new list items to the child list of the data source by specifying their item index. The item index can be obtained from the SelectEventArgs of the select event.

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
function App() {
    // define the array of Json
    let 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" }
            ]
        }
    ];
    let fields = { iconCss: "icon", tooltip: "text" };
    function onSelect(args) {
        data[args.index].child.push({
            id: "01-02",
            text: "Newly Added File",
            icon: "file",
            htmlAttributes: { role: "li", class: "list" }
        });
    }
    return (<div>
        <ListViewComponent id="listview" dataSource={data} fields={fields} headerTitle="Folders" showIcon={true} showHeader={true} select={onSelect.bind(this)} />
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';

function App() {
  // define the array of Json
  let 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" }
      ]
    }
  ];
  let fields: { [key: string]: Object } = { iconCss: "icon", tooltip: "text" };

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

  return (
    <div>
      <ListViewComponent
        id="listview"
        dataSource={data}
        fields={fields}
        headerTitle="Folders"
        showIcon={true}
        showHeader={true}
        select={onSelect.bind(this) as any}
      />
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
#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;
}
<!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="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>