OrgChart概述

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

下载免费试用

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

组织图是一个灵活的组织图组件，设计用于表示组织的结构。组织结构图可以说明公司、部门、团队或其他层级结构中的层级结构。

• OrgChart HtmlHelper的演示页面

基本配置

下面的示例演示了OrgChart组件的基本配置。

@(Html.Kendo(). orgchart () . name ("orgchart") . dataSource (dataSource => dataSource . read (read => read. viewmodel)。行动(“读”,“家”)得(m = > {m.Id (f = > f.ID);f. parentid (f => f. parentid);f. name (f =>);f. title (f =>);m.Avatar(f => f. avatar);m.膨胀(f => f.膨胀);})))

公共JsonResult读([DataSourceRequest] DataSourceRequest请求){列表< OrgChartEmployeeViewModel > data =新列表< OrgChartEmployeeViewModel >(){新OrgChartEmployeeViewModel () {ID = 1, Name = " Clevey Thrustfield”,Title =“首席执行官”,ParentID = null,扩大= true,《阿凡达》= " . . /内容/ web / orgchart /人/ 1. jpg”},新OrgChartEmployeeViewModel () {ID = 2,名称=“肖恩·拉塞尔,Title =“财务经理”,ParentID = 1,扩大= true,《阿凡达》= " . . /内容/ web / orgchart /人/ 2. jpg”},new OrgChartEmployeeViewModel() {ID = 3, Name = "Andrew Berry"， Title = "Team Lead"， ParentID = 1, Expanded = true, Avatar = "../content/web/orgchart/people/3.jpg"}， new OrgChartEmployeeViewModel() {ID = 4, Name = "Dilyana Newman"， Title = "Accountant"， ParentID = 2, Expanded = false, Avatar = "../content/web/orgchart/people/4.jpg"}};返回Json(data, JsonRequestBehavior.AllowGet);｝

功能和特性

• 绑定
• 编辑
• 分组
• 模板
• 可访问性

事件

您可以订阅所有组织结构图事件．有关组织结构图事件的完整示例，请参阅组织结构图活动演示．

下面的示例演示如何通过处理程序名称订阅事件。

@(Html.Kendo(). orgchart (). name ("orgchart") . events (e => e . select ("onSelect") . change ("onChange")))