Edit this page

TreeMap HtmlHelper Overview

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

Configuration

  1. Add a 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