Getting Started with the DropDownTree
This guide demonstrates how to get up and running with the Kendo UI for jQuery DropDownTree.
After the completion of this guide, you will be able to achieve the following end result:
<input id="dropdowntree" />
<script>
var items = [
{ text: "Mail", image: "https://demos.telerik.com/kendo-ui/content/web/treeview/mail.png" },
{ text: "Search", image: "https://demos.telerik.com/kendo-ui/content/web/treeview/search.png" }
];
$("#dropdowntree").kendoDropDownTree({
dataImageUrlField: "image",
dataSource: items,
checkboxes:true,
tagMode:"single"
});
</script>
1. Create an Input Element
First, create an <input> element on the page from which the DropDownTree component will be initialized.
<input id="dropdowntree" />
2. Initialize the DropDownTree
In this step, you will initialize the DropDownTree from the <input> element. All settings of the DropDownTree will be provided in the script statement. You have to describe its layout, configuration, and event handlers in JavaScript.
<input id="dropdowntree" />
<script>
// Target the input element by using jQuery and then call the kendoDropDownTree() method.
$("#dropdowntree").kendoDropDownTree();
</script>
Once the basic initialization is completed, you can start adding further configurations to the DropDownTree.
3. Bind the DropDownTree to Data
You can bind the DropDownTree to local and remote data. For further information, check the Data Binding section. In the example below, the DropDownTree is bound to a local data array.
<input id="dropdowntree" />
<script>
var items = [
{ text: "Mail", image: "https://demos.telerik.com/kendo-ui/content/web/treeview/mail.png" },
{ text: "Search", image: "https://demos.telerik.com/kendo-ui/content/web/treeview/search.png" }
];
$("#dropdowntree").kendoDropDownTree({
dataSource: items
});
</script>
4. Display Icons
By using the dataImageUrlField option, you can display icons next to the items. The field needs to be specified in the items array.
<input id="dropdowntree" />
<script>
var items = [
{ text: "Mail", image: "https://demos.telerik.com/kendo-ui/content/web/treeview/mail.png" },
{ text: "Search", image: "https://demos.telerik.com/kendo-ui/content/web/treeview/search.png" }
];
$("#dropdowntree").kendoDropDownTree({
dataImageUrlField: "image",
dataSource: items
});
</script>
5. Set the Tag Mode Option
The DropDownTree supports both single and multiple (default) tag modes. The example below shows how to switch to single tag mode. The checkboxes option must be enabled.
<input id="dropdowntree" />
<script>
var items = [
{ text: "Mail", image: "https://demos.telerik.com/kendo-ui/content/web/treeview/mail.png" },
{ text: "Search", image: "https://demos.telerik.com/kendo-ui/content/web/treeview/search.png" }
];
$("#dropdowntree").kendoDropDownTree({
dataImageUrlField: "image",
dataSource: items,
checkboxes:true,
tagMode:"single"
});
</script>