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

Dynamic hierarchical listview in JavaScript ListView control

08 May 2023 / 3 minutes to read

To dynamic hierarchical listview, 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:

  1. Initially, render the ListView with the required data source.
  2. Bind the select event that triggers selecting list item in the ListView control. 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
index.ts
index.html
index.css
Copied to clipboard
import { ListView, SelectEventArgs } from '@syncfusion/ej2-lists';

let dataSource: { [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' },
    ]
},
];
//Initialize the listview control
let listviewInstance: ListView = new ListView({

//Set the defined data to the dataSource property
dataSource: dataSource,

//Map the appropriate columns to the fields property
fields: { iconCss: 'icon', tooltip: 'text' },

//Set the showIcon to true
showIcon: true,

//Set header title
headerTitle: 'Folders',

//Set the showHeader to true
showHeader: true,

//Select onSelect event to add new list item in child page
select: onSelect
});

//Render the initialized ListView
listviewInstance.appendTo("#listview");

//Select event to add new list item in child page
function onSelect(args: SelectEventArgs) {
//Add new file to the child page of selected list item
this.dataSource[args.index].child.push({ id: '01-02', text: 'Newly Added File', icon: 'file', htmlAttributes: { role: 'li', class: 'list' } });
}
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-lists/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>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='listview'></div>
    </div>
</body>

</html>
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}

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


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

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

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

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

.list {
    color:deeppink !important;
}

/* csslint ignore:end */
Previous
Next