Search results

Getting started with ASP.NET MVC 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 MVC application to use our controls.

This section briefly explains you about how to include simple DropDown Tree control in your ASP.NET MVC application. You can refer to ASP.NET MVC 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 MVC application. Add the below simple code to your index.cshtml page which is available within the Views/Home folder, to initialize the DropDown Tree.

razor
data.cs
@Html.EJS().DropDownTree("data").Render()
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 data either the 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.

The following example illustrates the output in your browser.

razor
data.cs
<div id='container' style="margin:0 auto; width:250px;">
    @Html.EJS().DropDownTree("treedata").Placeholder("Select a Item").Fields(field =>
            field.Value("nodeId").Child(ViewBag.child).Text("nodeText").DataSource(ViewBag.dataSource)).Render()
</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