组件/数据管理/TreeList

TreeList概述

Telerik UI for ASP。NET MVC忍者图像

树列表是Telerik UI for ASP。NET MVC，一个具有 110+ 组件的专业级UI库，用于构建现代和功能丰富的 应用程序。想要试用它，请注册一个30天的免费试用。

下载免费试用

Telerik UI TreeList HtmlHelper。NET MVCis a server-side wrapper for the Kendo UI TreeList widget.

TreeList支持显示自引用的表格数据，并允许排序、过滤和数据编辑。

初始化树列表

下面的示例演示如何定义树列表。

属性区分根项ParentId字段。如果ParentId设置为.Nullable(真正的)，根项与be项的ParentId字段值为零．如果ParentId不可为空(.Nullable(假))，根项将是对其数据类型具有默认值的项。

  1. 创建一个新的ASP。NET MVCapplication. If you have installed theTelerik UI for ASP。NET MVCVisual Studio Extensions，为ASP创建一个Telerik UI。NET MVC应用程序。命名应用程序KendoGridServerBinding．如果您决定不为ASP使用Telerik UI。NET MVC Visual Studio扩展, follow the steps from the介绍性的文章为ASP添加Telerik UI。NET MVCto the application.

  2. 添加一个新的实体框架数据模型．右键单击~ /模型文件夹中的解决方案资源管理器并选择添加新项目．选择数据>ADO。NET实体数据模型在添加新项目对话框。命名模型Northwind.edmx并点击下一个．这开始了实体数据模型向导．

    用户界面为ASP。NET MVCA new entity data model

  3. 选择从数据库生成选项并单击下一个．配置到Northwind数据库的连接。点击下一个．

    用户界面为ASP。NET MVCChoosing the connection

  4. 选择员工表格来自您希望在模型中包括哪些数据库对象?．保留所有其他选项的默认设置。点击完成．

    用户界面为ASP。NET MVCChoosing the Employees table in the database objects

  5. 右键单击~ /模型文件夹，并添加一个新的EmployeeViewModel类。

@(Html.Kendo(). treelist () . name ("treelist") . columns (columns => {columns. add()。字段(f => f.FirstName). width(250)。标题(“名字”);columns.Add()。字段(e => e. lastname)。标题(“姓”);columns.Add()。Field(e => e. position);columns.Add()。字段(e = > e.Extension) .Title (Ext) .Format(“{0:#}”);}) . dataSource (dataSource => dataSource . read (read => read.)Action("Index"， "EmployeeDirectory")) .Model(m => {m.e id (f => f. employeeid);f. parentid (f => f. reportto).Nullable(true); m.Field(f => f.FirstName); m.Field(f => f.LastName); m.Field(f => f.ReportsTo); }) ) )
public class EmployeeViewModel {// Id。public int EmployeeID {get;设置;}公共字符串FirstName {get;设置;}公共字符串LastName {get;设置;} //一个空的ParentId。公共int ?reportto {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. reportto, e => e);返回Json(结果，JsonRequestBehavior.AllowGet);｝
public async Task TreeList_Read([DataSourceRequest] DataSourceRequest request) {var northwind = new NortwindEntities();var结果=等待北风。ToTreeDataSourceResultAsync(request, employee => employee.)EmployeeID, employee => employee。report to, employee => e);返回Json(结果，JsonRequestBehavior.AllowGet);｝

  1. 构建并运行应用程序。

    用户界面为ASP。NET MVCThe final result is a TreeList bound to data

功能和特性

事件

你可以订阅所有的树列表事件．有关基本树列表事件的完整示例，请参阅演示如何使用树列表的事件．

@(Html.Kendo(). treelist () . name ("treelist") /*其他配置。*/ .Events(events => {events. databinding ("onDataBinding");events.DataBound(“onDataBound”);}))