Edit this page

DropDownTree HtmlHelper Overview

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

Getting Started

Configuration

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

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

    Example
    
        @(Html.Kendo().DropDownTree()
                .Name("dropdowntree") //The name of the dropdowntree is mandatory. It specifies the "id" attribute of the widget.
                .Items(items =>
                {
                    items.Add().Text("Root Item 1")
                        .Items(childred =>
                        {
                            childred.Add().Text("Child Item 1");
                            childred.Add().Text("Child Item 2");
                        });
                    items.Add().Text("Root Item 2"); //Add item with text "Item2")
                })
        )
    
    
        <%: Html.Kendo().DropDownTree()
                .Name("dropdowntree") //The name of the dropdowntree is mandatory. It specifies the "id" attribute of the widget.
                .Items(items =>
                {
                    items.Add().Text("Root Item 1")
                        .Items(childred =>
                        {
                            childred.Add().Text("Child Item 1");
                            childred.Add().Text("Child Item 2");
                        });
                    items.Add().Text("Root Item 2"); //Add item with text "Item2")
                })
        %>
    

Event Handling

You can subscribe to all DropDownTree events.

By Handler Name

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

Example

    @(Html.Kendo().DropDownTree()
            .Name("dropdowntree")
            .Events(e => e
                .Expand("onExpand")
                .Collapse("onCollapse")
            )
    )
    <script>
    function onExpand() {
        //Handle the expand event
    }

    function onCollapse() {
        //Handle the collapse event
    }
    </script>

    <%: Html.Kendo().DropDownTree()
            .Name("dropdowntree")
            .Events(e => e
                .Expand("onExpand")
                .Collapse("onCollapse")
            )
    %>
    <script>
    function onExpand() {
        //Handle the expand event
    }

    function onCollapse() {
        //Handle the collapse event
    }
    </script>

By Template Delegate

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

Example

    @(Html.Kendo().DropDownTree()
            .Name("dropdowntree")
            .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 DropDownTree instance, use the jQuery.data() configuration option. Once a reference is established, use the DropDownTree API to control its behavior.

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

See Also