|
| 1 | +--- |
| 2 | +title: Asynchronous expand of selected node |
| 3 | +page_title: Asynchronous expand of selected node | Kendo UI TreeView |
| 4 | +description: "Learn how to asynchronously expand selected node of the Kendo UI TreeView." |
| 5 | +slug: howto_asynchronous_expand_selected_node |
| 6 | +--- |
| 7 | + |
| 8 | +# Expand Nodes during Drag |
| 9 | + |
| 10 | +The following example demonstrates how to expand the selected TreeView node with loadOnDemand set to true. To achieve this, child nodes must be loaded asynchronously in the child data source through [the Node's load() method](https://docs.telerik.com/kendo-ui/api/javascript/data/node/methods/load): |
| 11 | + |
| 12 | +## Example |
| 13 | + |
| 14 | +```html |
| 15 | +<div id="container"> |
| 16 | + <button id='expandNode' class="k-button k-primary">Expand selected node</button> |
| 17 | + <div id="treeview"></div> |
| 18 | +</div> |
| 19 | + |
| 20 | +<script> |
| 21 | + $(document).ready(function() { |
| 22 | + var OrderDetails = { |
| 23 | + type: "odata", |
| 24 | + transport: { |
| 25 | + read: { |
| 26 | + url: function(options) { |
| 27 | + return kendo.format( |
| 28 | + "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products({0})/Order_Details", |
| 29 | + options.ProductID |
| 30 | + ); |
| 31 | + } |
| 32 | + } |
| 33 | + }, |
| 34 | + schema: { |
| 35 | + model: { |
| 36 | + hasChildren: function() { |
| 37 | + return false; |
| 38 | + } |
| 39 | + } |
| 40 | + } |
| 41 | + }; |
| 42 | +
|
| 43 | + var Products = { |
| 44 | + type: "odata", |
| 45 | + schema: { |
| 46 | + model: { |
| 47 | + id: "ProductID", |
| 48 | + hasChildren: "Order_Details", |
| 49 | + children: OrderDetails |
| 50 | + } |
| 51 | + }, |
| 52 | + transport: { |
| 53 | + read: { |
| 54 | + url: function(options) { |
| 55 | + return kendo.format( |
| 56 | + "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories({0})/Products", |
| 57 | + options.CategoryID |
| 58 | + ); |
| 59 | + } |
| 60 | + } |
| 61 | + } |
| 62 | + }; |
| 63 | +
|
| 64 | + var Categories = new kendo.data.HierarchicalDataSource({ |
| 65 | + type: "odata", |
| 66 | + transport: { |
| 67 | + read: { |
| 68 | + url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories" |
| 69 | + } |
| 70 | + }, |
| 71 | + schema: { |
| 72 | + model: { |
| 73 | + hasChildren: "Products", |
| 74 | + id: "CategoryID", |
| 75 | + children: Products |
| 76 | + } |
| 77 | + } |
| 78 | + }); |
| 79 | +
|
| 80 | + $("#treeview").kendoTreeView({ |
| 81 | + loadOnDemand:true, |
| 82 | + dataSource: Categories, |
| 83 | + dataTextField: ["CategoryName", "ProductName", "OrderID"] |
| 84 | + }); |
| 85 | +
|
| 86 | + $("#expandNode").on("click", function(e) { |
| 87 | + var tree = $("#treeview").data("kendoTreeView"), |
| 88 | + selected = tree.select(), |
| 89 | + dataItem = tree.dataItem(selected); |
| 90 | +
|
| 91 | + var load = function (item) { |
| 92 | + var that = this, |
| 93 | + chain = $.Deferred().resolve(); |
| 94 | +
|
| 95 | + chain = chain.then(function () { |
| 96 | + that.expand(that.findByUid(item.uid)); |
| 97 | + return item.load(); |
| 98 | + }).then(function () { |
| 99 | + if (item.hasChildren) { |
| 100 | + var childrenChain = $.Deferred().resolve(); |
| 101 | +
|
| 102 | + item.children.data().forEach(function (child) { |
| 103 | + (function (child) { |
| 104 | + childrenChain = childrenChain.then(function () { |
| 105 | + return load.bind(that)(child); |
| 106 | + }) |
| 107 | + })(child) |
| 108 | + }) |
| 109 | +
|
| 110 | + return childrenChain; |
| 111 | + } |
| 112 | + }); |
| 113 | +
|
| 114 | + return chain; |
| 115 | + } |
| 116 | +
|
| 117 | + if (selected.length == 0) { |
| 118 | + alert("Select item first!"); |
| 119 | + return; |
| 120 | + } |
| 121 | +
|
| 122 | + load.bind(tree)(dataItem); |
| 123 | + }); |
| 124 | + }); |
| 125 | +</script> |
| 126 | +``` |
| 127 | + |
| 128 | +## See Also |
| 129 | + |
| 130 | +* [TreeView JavaScript API Reference](/api/javascript/ui/treeview) |
| 131 | +* [How to Check Nodes Programmatically]({% slug howto_checknodeprogramatically_treeview %}) |
| 132 | +* [How to Edit Nodes via Form]({% slug howto_editnodesviaform_treeview %}) |
| 133 | +* [How to Filter Out Search Results]({% slug howto_filetroutserachresults_treeview %}) |
| 134 | +* [How to Hide Checkboxes for Root Level]({% slug howto_hidecheckboxesforrootlevel_treeview %}) |
| 135 | +* [How to Persist Expanded State]({% slug howto_persistexpandedstate_treeview %}) |
| 136 | +* [How to Render Multiple TreeViews Using HTML Source Binding]({% slug howto_rendermultipleusing_htmlsourcebinding_mvvm_treeview %}) |
| 137 | +* [How to Scroll to Selected Item]({% slug howto_scrolltoselecteditem_treeview %}) |
| 138 | +* [How to Use FontAwesome Icons]({% slug howto_usefontawesomeicons_treeview %}) |
| 139 | + |
| 140 | +For more runnable examples on the Kendo UI TreeView, browse its [**How To** documentation folder]({% slug howto_bindcheckedstatecustommodelfields_angulartreeview %}). |
0 commit comments