Edit this page

TreeMap HtmlHelper Overview

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

Configuration

Below are listed the steps for you to follow when configuring the Kendo UI TreeMap.

  1. Make sure you followed all the steps from the introductory article on Telerik UI for ASP.NET MVC.

  2. Create a new action method which renders the view.

    Example
        public ActionResult Index()
        {
            return View();
        }
    
  3. Add a TreeMap.

    Example
    
            <%= Html.Kendo().TreeMap()
                    .Name("treeMap")
                    .DataSource(dataSource => dataSource
                        .Read(read => read
                            .Action("_PopulationUSA", "TreeMap")
                        )
                        .Model(m => m.Children("Items"))
                    )
                    .ValueField("Value")
                    .TextField("Name")
            %>
    
    
            $(Html.Kendo().TreeMap()
                  .Name("treeMap")
                  .DataSource(dataSource => dataSource
                      .Read(read => read
                          .Action("_PopulationUSA", "TreeMap")
                      )
                      .Model(m => m.Children("Items"))
                  )
                  .ValueField("Value")
                  .TextField("Name")
            )
    

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() {
            //Handle the itemCreated event.
        }

        function onDataBound() {
            //Handle the dataBound event.
        }
        </script>

        $(Html.Kendo().TreeMap()
              .Name("treemap")
              .Events(events => events
                  .ItemCreated("onItemCreated")
                  .DataBound("onDataBound")
              )
        )

        <script>
        function onItemCreated() {
            //Handle the itemCreated event.
        }

        function onDataBound() {
            //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() {
                        //Handle the itemCreated event.
                    }
                  </text>)
                  .DataBound(@<text>
                    function() {
                        //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