Appearance
The DropDownTree provides options for setting the widths of its list and popup.
Setting the List Width
To customize the width of the DropDownTree list and change its dimensions, use the jQuery width() method.
<input id="dropdowntree">
<script>
$(document).ready(function() {
var dropdowntree = $("#dropdowntree").kendoDropDownTree({
dataSource: [
{
text: "Item 1",
items: [
{ text: "Item 1.1" },
{ text: "Item 1.2" }
]
},
{ text: "Item 2" }
]
}).data("kendoDropDownTree");
dropdowntree.list.width(400);
});
</script>
Setting the Popup Width
You can enable the popup element to automatically adjust its width according to the length of the item label it displays. When the autoWidth option is set to true, the popup will display the content on a single line and will not wrap it up.
<input id="dropdowntree">
<script>
$(document).ready(function() {
var dropdowntree = $("#dropdowntree").kendoDropDownTree({
autoWidth: true,
dataSource: [
{
text: "Item 1",
items: [
{ text: "Item 1.1" },
{ text: "Item 1.2" }
]
},
{ text: "Item 2" }
]
}).data("kendoDropDownTree");
});
</script>