TreeView HtmlHelper Overview

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

The TreeView displays hierarchical data in a traditional tree structure.

Basic Configuration

  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.

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

        <%: Html.Kendo().TreeView()
            .Name("treeview") // The name of the TreeView is mandatory. It specifies the "id" attribute of the TreeView.
            .Items(items =>
            {
                items.Add().Text("Item 1"); // Add item with text "Item1".
                items.Add().Text("Item 2"); // Add item with text "Item2".
            })
        %>
    
        @(Html.Kendo().TreeView()
            .Name("treeview") // The name of the TreeView is mandatory. It specifies the "id" attribute of the TreeView.
            .Items(items =>
            {
                items.Add().Text("Item 1"); // Add item with text "Item1".
                items.Add().Text("Item 2"); // Add item with text "Item2".
            })
        )
    

Functionality and Features

Events

You can subscribe to all TreeView events. For a complete example on basic TreeView events, refer to the demo on using the events of the TreeView.

Handling by Handler Name

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

    <%: Html.Kendo().TreeView()
            .Name("treeview")
            .Events(e => e
                .Expand("treeview_expand")
                .Collapse("treeview_collapse")
            )
    %>
    <script>
        function treeview_collapse() {
            // Handle the collapse event.
        }

        function treeview_expand() {
            // Handle the expand event.
        }
    </script>
    @(Html.Kendo().TreeView()
            .Name("treeview")
            .Events(e => e
                .Expand("treeview_expand")
                .Collapse("treeview_collapse")
            )
    )
    <script>
        function treeview_collapse() {
            // Handle the collapse event.
        }

        function treeview_expand() {
            // Handle the expand event.
        }
    </script>

Handling by Template Delegate

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

@(Html.Kendo().TreeView()
    .Name("treeview")
    .Events(e => e
        .Expand(@<text>
        function() {
            // Handle the expand event inline.
        }
        </text>)
        .Collapse(@<text>
        function() {
            // Handle the collapse event inline.
        }
        </text>)
    )
)

Referencing Existing Instances

To reference an existing TreeView instance, use the jQuery.data() configuration option. Once a reference is established, use the TreeView client-side API to control its behavior.

// Place this after the TreeView for ASP.NET MVC declaration.
<script>
    $(function() {
        // The Name() of the TreeView is used to get its client-side instance.
        var treeview = $("#treeview").data("kendoTreeView");
    });
</script>

See Also

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