Having trouble getting help?
Contact Support
Contact Support
Dynamic hierarchical data in EJ2 JavaScript ListView control
28 Jan 202511 minutes to read
To create a dynamic hierarchical ListView, push new list item data into the existing dataSource
using the select
event.
Refer to the following steps to load list items into the child list:
-
Initially, render the ListView with the required data source.
-
Bind the
select
event that triggers when selecting a list item in the ListView control. By using the select event, you can push new list items to the child list of the data source by specifying its item index. The item index can be obtained from theSelectEventArgs
of the select event.
<!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/30.1.37/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-lists/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="listview"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
<style>
#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 */
</style>
</body>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
top: 45%;
left: 45%;
}