TreeMap HtmlHelper Overview

The Telerik UI TreeMap HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI TreeMap widget.

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

Initializing the TreeMap

The following example demonstrates how to define a TreeMap by using the TreeMap HtmlHelper.

        .DataSource(dataSource => dataSource
            .Read(read => read
                .Action("Population_Read", "TreeMap")
            .Model(m => m.Children("Items"))
    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));


        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; }


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.

        .Events(events => events

function onItemCreated(e) {
    // Tthe 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.

Referencing Existing Instances

To reference an existing Kendo UI TreeMap instance, use the 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.
    $(function() {
        // The Name() of the TreeMap is used to get its client-side instance.
        var treemap = $("#treemap").data("kendoTreeMap");

See Also

In this article
Not finding the help you need? Improve this article