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