How To in JQuery TreeView widget
29 Jun 20182 minutes to read
Update the modified data from tree to database
TreeView allow you to get the updated tree data after performing such operation like node editing, drag and drop, add and remove node. Using getTreeData method you can get the updated tree data.
Refer the sample from the link Updated tree data to know how to get updated data from TreeView.
You can also get the updated data source for remote data binding after performing the operation like editing, selecting/unselecting, expanding/collapsing, checking/unchecking and removing node. You cannot get the updated data source when you perform operation like drag and drop, adding node for remote data binding.
The updated data source also contains custom attributes (“ContactTitle”, “OrderID”, “EmployeeID”, “Freight”) if you return these from server.
Refer the sample from the link to know more about how to get updated data with custom attributes from TreeView for remote data binding.
TreeView context menu to process node operations
TreeView allow you to perform some tree operation like add, remove, update, move, check, uncheck, select node dynamically by using built-in methods and properties. Using those methods and properties, you can trigger it through context menu item click action to manipulate node.
Refer the sample from the link TreeContextMenu to know how to use context menu to perform tree operations.
Sorted data using refresh method
Persist updated data after edit, add and remove node
TreeView allow you to persist the updated data after performing node manipulation. By using persistence option, you can sustain on page refresh.
The nodeAdd, nodeCut, nodeDelete and nodePaste events occurs based on Treeview node manipulation. The beforeAdd,
beforeCut, beforeDelete and beforePaste events are triggered before the TreeView component node manipulation.
Refer the sample from the link PersistData to know how to persist updated tree data after refresh.
Filtering nodes in TreeView
You can able to filter TreeView nodes based on node text. Refer the sample from the link FilterTreeNodes to know how to filter tree nodes based on the node text.
AngularJS data binding to update data while add and remove node
TreeView allow you to bind and update tree data in mapped data component while add and removing node using AngularJS binding. Refer the sample from the link AngularDataBinding to know how to update data using AngularJS binding.
Set Tooltip for TreeView nodes
Auto hide/show the expand/collapse icon of TreeView
You can able to display expand icon on mouse entering into TreeView and hide while leaving from the TreeView. Refer the sample AutoHide to know how to hide/show the expand/collapse icons automatically based on mouse position.
Customize the expand/collapse icons of TreeView
You can able to customize the TreeView expand and collapse icon by using “cssClass” property of TreeView. Refer the sample CustomizeIcons to know how to customize the expand/collapse icons.