Demos About Pricing Try now
Edit this page

DropDownTree HtmlHelper Overview

As of the Kendo UI R2 2018, the DropDownTree is available in the Telerik UI for ASP.NET Core suite.

The DropDownTree HtmlHelper extension is a server-side wrapper for the Kendo UI DropDownTree widget.

It allows you to configure the Kendo UI DropDownTree widget from server-side code. The DropDownTree widget represents an editor of hierarchical data, rendered in a tree-like structure, which provides multiple selection option and custom nodes.

Basic Usage

The following example demonstrates how to define the DropDownTree by using the DropDownTree HtmlHelper.

Example
    @(Html.Kendo().DropDownTree()
        .Name("dropdowntree")
        .DataTextField("Name")
        .DataSource(dataSource => dataSource
            .Read(read => read
                .Action("Read_DropDownTreeData", "DropDownTree")
            )
        )
    )

    public class DropDownTreeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public static IList<HierarchicalViewModel> GetHierarchicalData()
        {
            var result = new List<HierarchicalViewModel>()
            {
                new HierarchicalViewModel() { ID = 1, ParentID = null, HasChildren = true, Name = "Parent item" },
                new HierarchicalViewModel() { ID = 2, ParentID = 1, HasChildren = true, Name = "Parent item" },
                new HierarchicalViewModel() { ID = 3, ParentID = 1, HasChildren = false, Name = "Item" },
                new HierarchicalViewModel() { ID = 4, ParentID = 2, HasChildren = false, Name = "Item" },
                new HierarchicalViewModel() { ID = 5, ParentID = 2, HasChildren = false, Name = "Item" }
            };

            return result;
        }

        public IActionResult Read_DropDownTreeData(int? id)
        {
            var result = GetHierarchicalData()
                .Where(x => id.HasValue ? x.ParentID == id : x.ParentID == null)
                .Select(item => new {
                    id = item.ID,
                    Name = item.Name,
                    expanded = item.Expanded,
                    imageUrl = item.ImageUrl,
                    hasChildren = item.HasChildren
                });

            return Json(result);
        }
    }

Configuration

The following example demonstrates the basic configuration of the DropDownTree HtmlHelper and how to get the DropDownTree instance.

Example
    @(Html.Kendo().DropDownTree()
        .Name("dropdowntree")
        .Checkboxes(true)
        .DataTextField("Name")
        .DataSource(dataSource => dataSource
            .Read(read => read
                .Action("Employees", "DropDownTree")
            )
        )

    )

    <script type="text/javascript">
        $(function () {
            //Notice that the Name() of the DropDownTree is used to get its client-side instance.
            var dropdowntree = $("#dropdowntree").data("kendoDropDownTree");
            console.log(dropdowntree);
        });
    </script>

See Also