ASP.NET Core TreeMap Overview
The TreeMap displays hierarchical data in a traditional tree structure. TreeMaps also support different rendering types such us Squarified, Vertical, and Horizontal (slice and dice algorithm).
The Telerik UI TreeMap TagHelper and HtmlHelper for ASP.NET Core 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 for ASP.NET Core is 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.
New to Telerik UI for ASP.NET Core?
To see the component in action, check the examples:
Initializing the TreeMap
The following example demonstrates how to define a TreeMap by using the TreeMap TagHelper and the TreeMap HtmlHelper.
@(Html.Kendo().TreeMap()
.Name("treeMap")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("Population_Read", "TreeMap")
)
.Model(m => m.Children("Items"))
)
.ValueField("Value")
.TextField("Name")
)
<kendo-treemap value-field="Value"
text-field="Name"
name="treeMap">
<hierarchical-datasource>
<transport>
<read url="@Url.Action("Population_Read", "TreeMap")"/>
</transport>
<schema>
<hierarchical-model children="Items">
</hierarchical-model>
</schema>
</hierarchical-datasource>
</kendo-treemap>
public ActionResult Population_Read()
{
var result = new List<Population>();
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(population);
return Json(result);
}
public class Population
{
public Population(string name, int value, List<Population> items)
{
this.Name = name;
this.Value = value;
this.Items = items;
}
public string Name { get; set; }
public int Value { get; set; }
public List<Population> Items { get; set; }
}
Binding to Remote Data
You can also bind the DataSource
to remote data. The following example demonstrates how to bind the Kendo UI TreeMap TagHelper to a remote service.
@(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; font-size: 12px;" })
)
<kendo-treemap name="treemap" text-field="name" value-field="value">
<hierarchical-datasource>
<transport>
<read url="/treemap/_populationusa" />
</transport>
<schema>
<hierarchical-model children="items"></hierarchical-model>
</schema>
</hierarchical-datasource>
</kendo-treemap>
Setting Custom Color Ranges
You can customize the TreeMap through the Colors
configuration option by adding the desired color ranges:
@(Html.Kendo().TreeMap()
.Name("treeMap")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("Population_Read", "TreeMap")
)
.Model(m => m.Children("Items"))
)
.Colors(color =>
{
color.AddRange("#0072c6", "#cbe2f3");
color.AddRange("#5db2ff", "#deeffe");
color.AddRange("#ff8f32", "#cbe7d0");
color.AddRange("#82ba00", "#e5f0cb");
color.AddRange("#ff8f32", "#fee8d5");
color.AddRange("#9e0a61", "#eccedf");
color.AddRange("#ac193d", "#eed0d7");
})
.ValueField("Value")
.TextField("Name")
)
Events
You can subscribe to all TreeMap events.
Handling Events by Handler Name
The following example demonstrates how to subscribe to events by a handler name.
@(Html.Kendo().TreeMap()
.Name("treemap")
.Events(events => events
.ItemCreated("onItemCreated")
.DataBound("onDataBound")
)
)
@addTagHelper *, Kendo.Mvc
<kendo-treemap name="treemap"
on-item-created="onItemCreated"
on-data-bound="onDataBound">
</kendo-treemap>
<script>
function onItemCreated(e) {
// The HTML element.
var element = e.element;
// The dataItem to which the element is bound.
var dataItem = e.sender.dataItem(e.element);
}
function onDataBound(e) {
// Handle the dataBound event.
}
</script>
Handling Events by Template Delegate
The following example demonstrates how to subscribe to events by a template delegate.
@(Html.Kendo().TreeMap()
.Name("treemap")
.Events(e => e
.ItemCreated(@<text>
function(e) {
// The HTML element.
var element = e.element;
// The dataItem to which the element is bound.
var dataItem = e.sender.dataItem(e.element);
}
</text>)
.DataBound(@<text>
function(e) {
// Handle the dataBound event.
}
</text>)
)
)
Referencing Existing Instances
To reference an existing Kendo UI TreeMap instance, use the jQuery.data()
configuration option. Once a reference is established, use the TreeMap client-side API to control its behavior.
// Place the following after the declaration of the TreeMap for ASP.NET Core.
<script>
$(function() {
// The Name() of the TreeMap is used to get its client-side instance.
var treemap = $("#treemap").data("kendoTreeMap");
});
</script>