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")
)