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:
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.@using Syncfusion.EJ2
@using Syncfusion.EJ2.Lists
@Html.EJS().ListView("listview").DataSource((IEnumerable<object>)ViewBag.dataSource).Fields(new ListViewFieldSettings { IconCss = "icon", Tooltip = "text" }).Select("onSelect").ShowIcon(true).ShowHeader(true).HeaderTitle("Folders").Render()
<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('https://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 */
.new-list {
color: deeppink !important;
}
/* csslint ignore:end */
</style>
<script>
//Select event to add new list item in child page
function onSelect(args) {
//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: 'new-list' } });
}
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
namespace WebApplication1.Controllers
{
public class ListViewController : Controller
{
public IActionResult list()
{
List<object> listdata = new List<object>();
listdata.Add(new
{
id = "01",
text = "Music",
icon = "folder",
child = new List<object>() { new { id = "01-01", text = "Gouttes.mp3", icon = "file" } }
});
listdata.Add(new
{
id = "02",
text = "Videos",
icon = "folder",
child = new List<object>() {
new { id= "02-01", text= "Naturals.mp4", icon= "file" },
new { id= "02-02", text= "Wild.mpeg", icon= "file" },
}
});
listdata.Add(new
{
id = "03",
text = "Documents",
icon = "folder",
child = new List<object>() {
new { id= "03-01", text= "Environment Pollution.docx", icon= "file" },
new { id= "03-02", text= "Global Water, Sanitation, & Hygiene.docx", icon= "file" },
new { id= "03-03", text= "Global Warming.ppt", icon= "file" },
new { id= "03-04", text= "Social Network.pdf", icon= "file" },
new { id= "03-05", text= "Youth Empowerment.pdf", icon= "file" }
}
});
listdata.Add(new
{
id = "04",
text = "Pictures",
icon = "folder",
child = new List<object>() {
new {
id= "04-01", text= "Camera Roll", icon= "folder",
child= new List<object>() {
new { id= "04-01-01", text= "WIN_20160726_094117.JPG", icon= "file" },
new { id= "04-01-02", text= "WIN_20160726_094118.JPG", icon= "file" },
new { id= "04-01-03", text= "WIN_20160726_094119.JPG", icon= "file" }
}
},
new {
id= "04-02", text= "Wind.jpg", icon= "file"
},
new {
id= "04-02", text= "Stone.jpg", icon= "file"
},
new {
id= "04-02", text= "Home.jpg", icon= "file"
},
new {
id= "04-02", text= "Bridge.png", icon= "file"
}
}
});
listdata.Add(new
{
id = "05",
text = "Downloads",
icon = "folder",
child = new List<object>() {
new { id= "05-01", text= "UI-Guide.pdf", icon= "file" },
new { id= "05-02", text= "Tutorials.zip", icon= "file" },
new { id= "05-03", text= "Game.exe", icon= "file" },
new { id= "05-04", text= "TypeScript.7z", icon= "file" },
}
});
ViewBag.dataSource = listdata;
return View();
}
}
}