Kendo UI Extended API: DropDownTreeView Widget

This website is no longer actively supported

Written by John DeVight on 21 Mar 2013 12:59

Download found at kendoui-extended-api on GitHub in the examples folder.

Overview

There have been a number of posts in the Kendo UI Forums asking about a DropDownList with a TreeView. I decided to combine the DropDownList and TreeView together to create a new DropDownTreeView widget.

Here are some screenshots of selecting an item in the DropDownTreeView:

Initial State
DropDown Opened
Item Selected From the TreeView

Adding Kendo UI Web Extended API to Your Application

Adding the StyleSheet

In the kendoui-extended-api GitHub repository, there is a styles folder. Download the folder and add it to your application. In the HTML file, define the reference to the kendo.ext.css. For example:

<link href="//cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet" />
<link href="//cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css" rel="stylesheet" />
<link href="./styles/kendoext/kendo.ext.css" rel="stylesheet" />

Adding the JavaScript

In the kendoui-extended-api GitHub repository, there is a js folder. Download the folder and add the kendo.web.ext.js file to your application. In the HTML file, define the reference to the kendo.web.ext.js after the references to the jQuery and Kendo UI JavaScript files. For example:

<script src="//code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="//cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script src="./scripts/kendo.web.ext.js"></script>

Define the DropDownTreeView HTML

Coming Soon

Here is the HTML:

<div id="dropDownTreeView">
</div>

Define the DropDownTreeView JavaScript

To create an instance of the Kendo.ui.ExtDropDownTreeView, select the "container" div element using jQuery and call the kendoExtDropDownTreeView function like this:

$("#dropDownTreeView").kendoExtDropDownTreeView({
    /* list of options defined here */
});

The DropDownGrid has the following configuration option:

• treeview (Kendo.ui.TreeView Configuration Options): The configuration options for the Kendo TreeView.

Here is an example:

var dropDownTreeView = $("#dropDownTreeView").kendoExtDropDownTreeView({
    treeview: {
        dataSource: new kendo.data.HierarchicalDataSource({
            data: [
                {
                    text: "Furniture", items: [
                      { text: "Tables & Chairs" },
                      { text: "Sofas" },
                      { text: "Occasional Furniture" }
                    ]
                },
                {
                    text: "Decor", items: [
                      { text: "Bed Linen" },
                      { text: "Curtains & Blinds" },
                      { text: "Carpets" }
                    ]
                }
            ]
        })
    }
}).data("kendoExtDropDownTreeView");

Expanding the TreeView Nodes

In the screenshot above, all the treeview nodes are expanded.

The DropDownTreeView has the following method:

• treeview: returns the Kendo TreeView widget.

To expand all the treeview nodes, get a reference to the treeview and call the expand method. Here is an example:

dropDownTreeView.treeview().expand(".k-item");

Getting the Selected Node

The DropDownTreeView has the following event:

• select: triggered when a node is being selected by the user.

To get the item selected in the DropDownTreeView, bind to the DropDownTreeView's select event. In the select event handler, get the selected node.

Here is an example:

dropDownTreeView.bind("select", function (e) {
    console.log(kendo.format("You Selected: {0}", $(e.node).children("div").text()));
});

References

• kendoui-extended-api on GitHub
• Kendo.ui.TreeView Documentation

Related Articles

• Kendo UI Extended API: DropDownGrid Widget
• Kendo UI Extended API: MessageBox Dialogs
• Kendo UI Extended API: BorderLayout Widget

---