TreeMap HtmlHelper Overview

The TreeMap HtmlHelper extension is a server-side wrapper for the Kendo UI TreeMap widget.

Configuration

Add the TreeMap.

Example
  @(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; }
    }

Event Handling

You can subscribe to all TreeMap events.

By Handler Name

The following example demonstrates how to subscribe to events by a handler name.

Example
@(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>

By Template Delegate

The following example demonstrates how to subscribe to events by a template delegate.

Example
@(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>)
        )
)

Reference

Existing Instances

To reference an existing Kendo UI TreeMap instance, use the jQuery.data() configuration option. Once a reference is established, use the TreeMap API to control its behavior.

Example
// Put this after your Kendo UI TreeMap for ASP.NET MVC declaration.
<script>
    $(function() {
        //Notice that the Name() of the TreeMap is used to get its client-side instance.
        var treemap = $("#treemap").data("kendoTreeMap");
    });
</script>

See Also

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