ASP.NET MVC 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 HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI TreeMap widget.
Telerik UI for ASP.NET MVC 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 MVC?
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")
)
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;" })
)
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")
)
)
<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>
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 MVC.
<script>
$(function() {
// The Name() of the TreeMap is used to get its client-side instance.
var treemap = $("#treemap").data("kendoTreeMap");
});
</script>