Search results

Getting started with ASP.NET Core Dropdown Tree control

Starting with v16.2.0.x, if you reference Syncfusion assemblies from trial setup or from the NuGet feed, you also have to include a license key in your projects. Please refer to this link to know about registering Syncfusion license key in your ASP.NET CORE application to use our components.

This section briefly explains you about how to include simple DropDown Tree control in your ASP.NET Core application. You can refer to ASP.NET Core Getting Started documentation page for system requirements, and configure common specifications.

Initialize DropDown Tree control to the Application

DropDown Tree control can be rendered by using the ejs-dropdowntree tag helper in ASP.NET Core application. Add the below simple code to your index.cshtml page which is available within the Views/Home folder, to initialize the DropDown Tree.

tagHelper
data.cs
<ejs-dropdowntree id="data">
</ejs-dropdowntree>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using DropDownTree.Models;
using Syncfusion.EJ2.DropDowns;

namespace DropDownTree.Controllers
{
    public class DropDownTreeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Running the above code will display the basic DropDown Tree on the browser.

Binding data source

The Dropdown Tree control can load the data either from local data sources or remote data services. This can be done using the dataSource property that is a member of the fields property. The dataSource property supports nested list of data and DataManager. Here, nested list of data is passed to the Dropdown Tree control.

tagHelper
data.cs
<div style="margin:0 auto; width:250px;">
    <ejs-dropdowntree id="treedata" placeholder="Select a Item">
        <e-dropdowntree-fields dataSource="ViewBag.dataSource" child="ViewBag.child" value="nodeId" text="nodeText"></e-dropdowntree-fields>
    </ejs-dropdowntree>
</div>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using DropDownTree.Models;
using Syncfusion.EJ2.DropDowns;

namespace DropDownTree.Controllers
{
    public class DropDownTreeController : Controller
    {
          public IActionResult Index()
        {
            List<Parent> parentitem = new List<Parent>();
            List<Child> childitem = new List<Child>();
            parentitem.Add(new Parent
            {
                nodeId = "01",
                nodeText = "Music",
                nodeChild = childitem,
            });
            childitem.Add(new Child { nodeId = "01-01", nodeText = "Gouttes.mp3" });

            List<Child> childitem2 = new List<Child>();
            parentitem.Add(new Parent
            {
                nodeId = "02",
                nodeText = "Videos",
                expanded=true,
                nodeChild = childitem2,
            });
            childitem2.Add(new Child { nodeId = "02-01", nodeText = "Naturals.mp4" });
            childitem2.Add(new Child { nodeId = "02-02", nodeText = "Wild.mpeg"});
            List<Child> childitem3 = new List<Child>();
            parentitem.Add(new Parent
            {
                nodeId = "03",
                nodeText = "Documents",
                nodeChild = childitem3,
            });
            childitem3.Add(new Child { nodeId = "03-01", nodeText = "Environment Pollution.docx" });
            childitem3.Add(new Child { nodeId = "03-02", nodeText = "Global Water, Sanitation, & Hygiene.docx"});
            childitem3.Add(new Child { nodeId = "03-03", nodeText = "Global Warming.ppt" });
            childitem3.Add(new Child { nodeId = "03-04", nodeText = "Social Network.pdf" });
            childitem3.Add(new Child { nodeId = "03-05", nodeText = "Youth Empowerment.pdf"});
            ViewBag.dataSource = parentitem;
            char[] value = { 'n','o','d','e','C', 'h', 'i', 'l', 'd' };
            string Child = new string(value);
            ViewBag.child = Child;
            return View();
        }
          public class Parent
        {
            public string nodeId;
            public string nodeText;
            public string icon;
            public bool expanded;
            public bool selected;
            public List<Child> nodeChild;

        }
        public class Child
        {
            public string nodeId;
            public string nodeText;
            public string icon;
            public bool expanded;
            public bool selected;
            public List<Child> nodeChild;

        }
    }
}

Output be like the below.

DropDownTree Sample