TreeMap概述

TreeMap以传统的树结构显示层次数据。TreeMaps还支持不同的渲染类型，如squfied, Vertical和Horizontal(切片和骰子算法)。

Telerik UI TreeMap TagHelper和HtmlHelper。网络核心are server-side wrappers for the Kendo UI TreeMap widget. To add the component to your ASP.NET Core app, you can use either.

新的Telerik UI为ASP。网络核心?

Telerik UI for ASP。网络核心是一个具有 110+ 组件的专业级UI库，用于构建现代和功能丰富的 应用程序。想要试用它，可以注册一个30天的免费试用期。

下载免费试用

要查看组件的运行情况，请检查示例:

• TreeMap HtmlHelper的演示页面
• TreeMap TagHelper的演示页面

初始化树地图

下面的例子演示了如何使用TreeMap TagHelper和TreeMap HtmlHelper来定义TreeMap。

@(Html.Kendo().TreeMap() .Name("treeMap") .DataSource(dataSource => dataSource .Read(read => read .Action("Population_Read"， "treeMap")) .Model(m => m. children ("Items")) .ValueField("Value") .TextField("Name")))

 < hierarchy -datasource>     < hierarchy -model children="Items">     .

public ActionResult Population_Read() {var result = new List();var population = new population ("Parent One"， 1, new List< population >());population.Items。Add(new Population("Child 1"， 2, null));population.Items。Add(new Population("Child 2"， 3, null));result.Add(人口);返回Json(结果);｝

公共类Population{公共Population(字符串名称，int值，列表项){this. this. Population . this. this. Population . this. this。Name = Name;这一点。价值=价值;这一点。Items =物品;}公共字符串名称{获取;设置;} public int值{get;设置;} public List Items {get; set; } }

绑定远程数据

还可以绑定数据源远程数据。下面的示例演示如何将Kendo UI TreeMap TagHelper绑定到远程服务。

@(Html.Kendo().TreeMap() .Name("treeMap") .DataSource(dataSource => dataSource .Read(read => read .Action("_PopulationUSA"， "treeMap")) .Model(m => m. children ("Items"))) .ValueField("Value") .TextField("Name") .HtmlAttributes(new {style = "height:600px;字体大小:12 px;“}))

 < hierarchy -datasource>     < hierarchy -model children="items">   

事件

你可以订阅所有的TreeMap事件．

按处理程序名称处理事件

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

@(Html.Kendo().TreeMap() .Name("treemap") .Events(events => events .ItemCreated("onItemCreated") .DataBound("onDataBound"))))

@addTagHelper *，剑道。Mvc