ASP.NET Core DropDownTree Overview
The DropDownTree is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI DropDownTree TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI DropDownTree widget.
The DropDownTree represents an editor of hierarchical data, rendered in a tree-like structure, which provides multiple selection option and custom nodes.
Initializing the DropDownTree
The following example demonstrates how to define the DropDownTree.
@(Html.Kendo().DropDownTree()
.Name("dropdowntree")
.DataTextField("Name")
.DataValueField("id")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("Read_DropDownTreeData", "Home")
)
)
)
<kendo-dropdowntree datatextfield="Name" datavaluefield="id" name="dropdowntree" style="width: 100%">
<hierarchical-datasource>
<schema>
<hierarchical-model id="id"></hierarchical-model>
</schema>
<transport>
<read url="@Url.Action("Remote_DropDownTreeData", "Home")" />
</transport>
</hierarchical-datasource>
</kendo-dropdowntree>
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,
hasChildren = item.HasChildren
});
return Json(result);
}
Basic Configuration
The following example demonstrates the basic configuration of the DropDownTree.
@(Html.Kendo().DropDownTree()
.Name("dropdowntree")
.Items(dropdowntree =>
{
dropdowntree.Add().Text("My Web Site")
.SpriteCssClasses("folder")
.Expanded(true)
.Items(root =>
{
root.Add().Text("images")
.Expanded(true)
.SpriteCssClasses("folder")
.Items(images =>
{
images.Add().Text("logo.png")
.SpriteCssClasses("image");
});
root.Add().Text("resources")
.Expanded(true)
.SpriteCssClasses("folder")
.Items(resources =>
{
resources.Add().Text("pdf")
.Expanded(true)
.SpriteCssClasses("folder")
.Items(pdf =>
{
pdf.Add().Text("prices.pdf")
.SpriteCssClasses("pdf");
});
resources.Add().Text("zip")
.SpriteCssClasses("folder");
});
root.Add().Text("about.html")
.SpriteCssClasses("html");
root.Add().Text("index.html")
.SpriteCssClasses("html");
});
})
)
<kendo-dropdowntree name="dropdowntree">
<items>
<dropdowntree-item expanded="true" text="My Web Site" sprite-css-class="folder">
<items>
<dropdowntree-item expanded="true" text="images" sprite-css-class="folder">
<items>
<dropdowntree-item text="logo.png" sprite-css-class="image">
</dropdowntree-item>
</items>
</dropdowntree-item>
</items>
</dropdowntree-item>
<dropdowntree-item expanded="true" text="resources" sprite-css-class="folder">
<items>
<dropdowntree-item expanded="true" text="pdf" sprite-css-class="folder">
<items>
<dropdowntree-item text="prices.pdf" sprite-css-class="pdf">
</dropdowntree-item>
<dropdowntree-item text="zip" sprite-css-class="folder">
<items>
<dropdowntree-item text="about.html" sprite-css-class="html">
</dropdowntree-item>
<dropdowntree-item text="index.html" sprite-css-class="html">
</dropdowntree-item>
</items>
</dropdowntree-item>
</items>
</dropdowntree-item>
</items>
</dropdowntree-item>
</items>
</kendo-dropdowntree>
Functionality and Features
| Feature | Description |
|---|---|
| Data binding | The DropDownTree supports different data binding approaches. |
| Checkboxes | You can add checkboxes to the DropDownTree's items. |
| Filtering | You are able to filter the displayed DropDownTree items by their text value. |
| Items | You can configure different options for the items of the component. |
| Templates | The DropDownTree supports customizing its look through templates. |
| Accessibility | The DropDownTree is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support. |
Next Steps
- Getting Started with the DropDownTree
Basic Usage of the DropDownTree HtmlHelper for ASP.NET Core (Demo)
Basic Usage of the DropDownTree TagHelper for ASP.NET Core (Demo)
- DropDownTree in Razor Pages