DropDownTree Tag Helper Overview
The DropDownTree tag helper helps you configure the Kendo UI DropDownTree widget in ASP.NET Core applications.
Basic Usage
The following example demonstrates how to define the DropDownTree by using the DropDownTree tag helper.
Example
<kendo-dropdowntree name="dropdowntree1">
</kendo-dropdowntree>
Configuration
The DropDownTree tag helper configuration options are passed as attributes of the tag. You can configure the items by binding the widget to <hierarchical-datasource>.
<kendo-dropdowntree name="dropdowntree1" datatextfield="FullName">
<hierarchical-datasource>
<transport>
<read url="https://demos.telerik.com/kendo-ui/service/Employees" datatype="jsonp" />
</transport>
<schema type="json">
<hierarchical-model id="EmployeeId" has-children="HasEmployees">
</hierarchical-model>
</schema>
</hierarchical-datasource>
</kendo-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");
});
})
)