TreeList Overview
The TreeList 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 TreeList TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI TreeList widget.
The TreeList enables the display of self-referencing tabular data and allows sorting, filtering, and data editing.
Initializing the TreeList
The following example demonstrates how to define the TreeList.
The TreeList distinguishes the root items based on the
ParentIdfield. If theParentIdis set as.Nullable(true), root items with be items whoseParentIdfield values arenull. If theParentIdis not nullable (.Nullable(false)), root items will be items which have a default value for their data type.
@(Html.Kendo().TreeList<Kendo.Mvc.Examples.Models.TreeList.EmployeeDirectoryModel>()
.Name("treelist")
.Columns(columns =>
{
columns.Add().Field(f => f.FirstName).Width(250).Title("First Name");
columns.Add().Field(e => e.LastName).Title("Last Name");
columns.Add().Field(e => e.Position);
columns.Add().Field(e => e.Extension).Title("Ext").Format("{0:#}");
})
.DataSource(dataSource => dataSource
.Read(read => read.Action("Index", "EmployeeDirectory"))
.Model(m => {
m.Id(f => f.EmployeeId);
m.ParentId(f => f.ReportsTo).Nullable(true);
m.Field(f => f.FirstName);
m.Field(f => f.LastName);
m.Field(f => f.ReportsTo);
})
)
)
<kendo-treelist name="treelist">
<columns>
<treelist-column field="FirstName" title="First Name"></treelist-column>
<treelist-column field="LastName" title="Last Name" ></treelist-column>
<treelist-column field="Position"></treelist-column>
<treelist-column field="Extension"></treelist-column>
</columns>
<treelist-datasource>
<transport>
<read url="https://demos.telerik.com/kendo-ui/service/EmployeeDirectory/All" datatype="jsonp" />
</transport>
<schema type="json">
<treelist-model id="EmployeeId" parent-id="ReportsTo" expanded="true">
<fields>
<field name="ReportsTo" nullable="true"></field>
<field name="EmployeeId" type="number"></field>
<field name="Extension" type="number"></field>
</fields>
</treelist-model>
</schema>
</treelist-datasource>
</kendo-treelist>
public class EmployeeViewModel
{
// The Id.
public int EmployeeID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
// A nullable ParentId.
public int? ReportsTo { get; set; }
public string Address { get; set; }
// This is a case-sensitive property. Define it only if you want to use lazy-loading.
// If it is not defined, the TreeList will calculate and assign its value on the client.
public bool hasChildren { get; set; }
}
public JsonResult All([DataSourceRequest] DataSourceRequest request)
{
var result = GetDirectory().ToTreeDataSourceResult(request,
e => e.EmployeeId,
e => e.ReportsTo,
e => e
);
return Json(result, JsonRequestBehavior.AllowGet);
}
public async Task<JsonResult> TreeList_Read([DataSourceRequest] DataSourceRequest request)
{
var northwind = new NortwindEntities();
var result = await northwind.Employees.ToTreeDataSourceResultAsync(request,
employee => employee.EmployeeID,
employee => employee.ReportsTo,
employee => e
);
return Json(result, JsonRequestBehavior.AllowGet);
}
Functionality and Features
- Data operations
- Export options
- More settings
Events
You can subscribe to all TreeList events. For a complete example on basic TreeList events, refer to the demo on using the events of the TreeList.
@(Html.Kendo().TreeList<KendoTreeListBinding.Models.EmployeeViewModel>()
.Name("treelist")
/* Other configurations. */
.Events(events => {
events.DataBinding("onDataBinding");
events.DataBound("onDataBound");
})
)
<script>
function onDataBinding(e) {
// Handle the dataBinding event.
var treelist = this;
}
function onDataBound(e) {
// Handle the dataBound event.
var treelist = e.sender;
}
</script>
Referencing Existing Instances
To reference an existing Kendo UI TreeList instance, use the jQuery.data() configuration option. Once a reference is established, use the TreeList client-side API to control its behavior.
@(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>
<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>