TreeList TagHelper Overview
The Telerik UI TreeList TagHelper for ASP.NET Core is a server-side wrapper for the Kendo UI TreeList widget.
The TreeList enables the display of self-referencing tabular data and allows sorting, filtering, and data editing.
The TreeList is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Initializing the TreeList
The following example demonstrates how to define the TreeList by using the TreeList TagHelper.
<kendo-treelist name="treelist">
<columns>
<treelist-column field="Name"></treelist-column>
<treelist-column field="Position"></treelist-column>
</columns>
</kendo-treelist>
Functionality and Features
Referencing Existing Instances
To refer to an existing TreeList instance, use the jQuery.data() method and pass "kendoTreeList" as an argument. Once a reference has been established, use the TreeList client-side API to control its behavior.
The following example demonstrates how to access an existing TreeList instance.
<kendo-treelist datasource-id="dataSource" name="treelist">
<columns>
<treelist-column field="Name"></treelist-column>
<treelist-column field="Position"></treelist-column>
</columns>
</kendo-treelist>
<script>
$(function () {
// Get reference to the kendo.ui.TreeList instance
var treelist = $("#treelist").data("kendoTreeList");
})
var dataSource = new kendo.data.TreeListDataSource({
data: [
{ id: 1, parentId: null, Name: "Jane Smith", Position: "CEO" },
{ id: 2, parentId: 1, Name: "Alex Sells", Position: "EVP Sales" },
{ id: 3, parentId: 1, Name: "Bob Price", Position: "EVP Marketing" }
]
})
</script>
@(Html.Kendo().TreeList<dynamic>()
.Name("treelist")
.Columns(x =>
{
x.Add().Field("Name");
x.Add().Field("Position");
})
.DataSource("dataSource")
)
<script>
$(function () {
// Get a reference to the kendo.ui.TreeList instance.
var treelist = $("#treelist").data("kendoTreeList");
})
var dataSource = new kendo.data.TreeListDataSource({
data: [
{ id: 1, parentId: null, Name: "Jane Smith", Position: "CEO" },
{ id: 2, parentId: 1, Name: "Alex Sells", Position: "EVP Sales" },
{ id: 3, parentId: 1, Name: "Bob Price", Position: "EVP Marketing" }
]
})
</script>