Edit this page

TreeView HtmlHelper Overview

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

Getting Started

Configuration

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

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

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

Security Trimming

The Kendo UI TreeView widget has a built-in security trimming functionality, which is enabled by default. If the URL, which the TreeView item points to, is not authorized, then it is hidden. Security trimming depends on the ASP.NET MVC Authorization. Every action method decorated with AuthorizeAttribute checks whether the user is authorized and allows or forbids the request.

For more information on the ASP.NET MVC Authorization, refer to this link.

The TreeView hides the Menu item if the OnAuthorization method returns HttpUnauthorizedResult.

To use a custom AuthorizeAttribute, refer to this link.

Event Handling

You can subscribe to all TreeView events.

By Handler Name

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

Example

        <%: 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>

By Template Delegate

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

Example

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

Reference

Existing Instances

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

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

See Also