Having trouble getting help?
Contact Support
Contact Support
Nested list in EJ2 JavaScript ListView control
22 Feb 202524 minutes to read
The ListView control supports nested lists. To implement a nested list, the child property should be defined for the nested list within the array of JSON.
var continent = [
{
text: 'Asia',
id: '01',
category: 'Continent',
'child': [{
text: 'India',
id: '1',
category: 'Asia',
'child': [{
text: 'Delhi',
id: '1001',
category: 'India',
},
{
text: 'Kashmir',
id: '1002',
category: 'India',
},
{
text: 'Goa',
id: '1003',
category: 'India',
},
]
},
{
text: 'China',
id: '2',
category: 'Asia',
'child': [{
text: 'Zhejiang',
id: '2001',
category: 'China',
},
{
text: 'Hunan',
id: '2002',
category: 'China',
},
{
text: 'Shandong',
id: '2003',
category: 'China',
}]
}]
},
{
text: 'North America',
id: '02',
category: 'Continent',
'child': [{
text: 'USA',
id: '3',
category: 'North America',
'child': [{
text: 'California',
id: '3001',
category: 'USA',
},
{
text: 'New York',
id: '3002',
category: 'USA',
},
{
text: 'Florida',
id: '3003',
category: 'USA',
}]
},
{
text: 'Canada',
id: '4',
category: 'North America',
'child': [{
text: 'Ontario',
id: '4001',
category: 'Canada',
},
{
text: 'Alberta',
id: '4002',
category: 'Canada',
},
{
text: 'Manitoba',
id: '4003',
category: 'Canada',
}]
}]
},
{
text: 'Europe',
id: '03',
category: 'Continent',
'child': [{
text: 'Germany',
id: '5',
category: 'Europe',
'child': [{
text: 'Berlin',
id: '5001',
category: 'Germany',
},
{
text: 'Bavaria',
id: '5002',
category: 'Germany',
},
{
text: 'Hesse',
id: '5003',
category: 'Germany',
}]
}, {
text: 'France',
id: '6',
category: 'Europe',
'child': [{
text: 'Paris',
id: '6001',
category: 'France',
},
{
text: 'Lyon',
id: '6002',
category: 'France',
},
{
text: 'Marseille',
id: '6003',
category: 'France',
}]
}]
},
{
text: 'Australia',
id: '04',
category: 'Continent',
'child': [{
text: 'Australia',
id: '7',
category: 'Australia',
'child': [{
text: 'Sydney',
id: '7001',
category: 'Australia',
},
{
text: 'Melbourne',
id: '7002',
category: 'Australia',
},
{
text: 'Brisbane',
id: '7003',
category: 'Australia',
}]
}, {
text: 'New Zealand',
id: '8',
category: 'Australia',
'child': [{
text: 'Milford Sound',
id: '8001',
category: 'New Zealand',
},
{
text: 'Tongariro National Park',
id: '8002',
category: 'New Zealand',
},
{
text: 'Fiordland National Park',
id: '8003',
category: 'New Zealand',
}]
}]
},
{
text: 'Africa',
id: '05',
category: 'Continent',
'child': [{
text: 'Morocco',
id: '9',
category: 'Africa',
'child': [{
text: 'Rabat',
id: '9001',
category: 'Morocco',
},
{
text: 'Toubkal',
id: '9002',
category: 'Morocco',
},
{
text: 'Todgha Gorge',
id: '9003',
category: 'Morocco',
}]
}, {
text: 'South Africa',
id: '10',
category: 'Africa',
'child': [{
text: 'Cape Town',
id: '10001',
category: 'South Africa',
},
{
text: 'Pretoria',
id: '10002',
category: 'South Africa',
},
{
text: 'Bloemfontein',
id: '10003',
category: 'South Africa',
}]
}]
}
];
//Initialize ListView control
var listviewInstance = new ej.lists.ListView({
//set the data to datasource property
dataSource: continent,
// map the groupBy field with category column
fields: { tooltip: 'text' },
headerTitle: 'Continent',
showHeader: true,
animation: { duration: 0 }
});
//Render initialized ListView
listviewInstance.appendTo("#element");export var continent = [
{
'text': 'Asia',
'id': '01',
'category': 'Continent',
'child': [{
'text': 'India',
'id': '1',
'category': 'Asia',
'child': [{
'text': 'Delhi',
'id': '1001',
'category': 'India',
},
{
'text': 'Kashmir',
'id': '1002',
'category': 'India',
},
{
'text': 'Goa',
'id': '1003',
'category': 'India',
},
]
},
{
'text': 'China',
'id': '2',
'category': 'Asia',
'child': [{
'text': 'Zhejiang',
'id': '2001',
'category': 'China',
},
{
'text': 'Hunan',
'id': '2002',
'category': 'China',
},
{
'text': 'Shandong',
'id': '2003',
'category': 'China',
}]
}]
},
{
'text': 'North America',
'id': '02',
'category': 'Continent',
'child': [{
'text': 'USA',
'id': '3',
'category': 'North America',
'child': [{
'text': 'California',
'id': '3001',
'category': 'USA',
},
{
'text': 'New York',
'id': '3002',
'category': 'USA',
},
{
'text': 'Florida',
'id': '3003',
'category': 'USA',
}]
},
{
'text': 'Canada',
'id': '4',
'category': 'North America',
'child': [{
'text': 'Ontario',
'id': '4001',
'category': 'Canada',
},
{
'text': 'Alberta',
'id': '4002',
'category': 'Canada',
},
{
'text': 'Manitoba',
'id': '4003',
'category': 'Canada',
}]
}]
},
{
'text': 'Europe',
'id': '03',
'category': 'Continent',
'child': [{
'text': 'Germany',
'id': '5',
'category': 'Europe',
'child': [{
'text': 'Berlin',
'id': '5001',
'category': 'Germany',
},
{
'text': 'Bavaria',
'id': '5002',
'category': 'Germany',
},
{
'text': 'Hesse',
'id': '5003',
'category': 'Germany',
}]
}, {
'text': 'France',
'id': '6',
'category': 'Europe',
'child': [{
'text': 'Paris',
'id': '6001',
'category': 'France',
},
{
'text': 'Lyon',
'id': '6002',
'category': 'France',
},
{
'text': 'Marseille',
'id': '6003',
'category': 'France',
}]
}]
},
{
'text': 'Australia',
'id': '04',
'category': 'Continent',
'child': [{
'text': 'Australia',
'id': '7',
'category': 'Australia',
'child': [{
'text': 'Sydney',
'id': '7001',
'category': 'Australia',
},
{
'text': 'Melbourne',
'id': '7002',
'category': 'Australia',
},
{
'text': 'Brisbane',
'id': '7003',
'category': 'Australia',
}]
}, {
'text': 'New Zealand',
'id': '8',
'category': 'Australia',
'child': [{
'text': 'Milford Sound',
'id': '8001',
'category': 'New Zealand',
},
{
'text': 'Tongariro National Park',
'id': '8002',
'category': 'New Zealand',
},
{
'text': 'Fiordland National Park',
'id': '8003',
'category': 'New Zealand',
}]
}]
},
{
'text': 'Africa',
'id': '05',
'category': 'Continent',
'child': [{
'text': 'Morocco',
'id': '9',
'category': 'Africa',
'child': [{
'text': 'Rabat',
'id': '9001',
'category': 'Morocco',
},
{
'text': 'Toubkal',
'id': '9002',
'category': 'Morocco',
},
{
'text': 'Todgha Gorge',
'id': '9003',
'category': 'Morocco',
}]
}, {
'text': 'South Africa',
'id': '10',
'category': 'Africa',
'child': [{
'text': 'Cape Town',
'id': '10001',
'category': 'South Africa',
},
{
'text': 'Pretoria',
'id': '10002',
'category': 'South Africa',
},
{
'text': 'Bloemfontein',
'id': '10003',
'category': 'South Africa',
}]
}]
}
];<!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/28.2.3/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-lists/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/28.2.3/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="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
<style>
#element {
display: block;
max-width: 350px;
margin: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
</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%;
}