Events
You can subscribe to all DropDownTree events and then use them to further customize the behavior of the control.
For an example on basic DropDownTree events, refer to the demo on using the events of the DropDownTree.
@(Html.Kendo().DropDownTree()
.Name("dropdowntree")
.DataTextField("Name")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("Employees", "Home")
)
)
.Events(events => events
.DataBound("onDataBound")
.Change("onChange")
.Select("onSelect")
.Close("onClose")
.Open("onOpen")
.Filtering("onFiltering")
)
)
<kendo-dropdowntree datatextfield="Name" datavaluefield="id" name="dropdowntree" on-data-bound="onDataBound" on-open="onOpen" on-close="onClose" on-change="onChange" on-filtering="onFiltering" on-select="onSelect" style="width: 100%">
<hierarchical-datasource>
<schema>
<hierarchical-model id="id"></hierarchical-model>
</schema>
<transport>
<read url="@Url.Action("Employees", "Home")" />
</transport>
</hierarchical-datasource>
</kendo-dropdowntree>
<script type="text/javascript">
function onDataBound(e) {
console.log('DropDownTree instance:', e.sender);
}
function onChange(e) {
console.log('Selected node changed to:', e.sender.select());
}
function onSelect(e) {
console.log('Selected node:', e.node);
}
function onClose(e) {
console.log('DropDownTree instance:', e.sender);
}
function onOpen(e) {
console.log('DropDownTree instance:', e.sender);
}
function onFiltering(e) {
console.log('Folter:', e.filter);
}
</script>