jQuery datatreeview manipulating the treeview after creating - maikelbos0/VDT GitHub Wiki

It's possible to manipulate the datatreeview via client-side javascript. The datatreeview plugin can be called with a callback parameter function. The function provides access to the Datatreeview object via this as a first parameter. It is possible to call the datatreeview function multiple times on a selector; this will only create the treeview once but provide access to the datatreeview on the first and on subsequent calls.

<script type="text/javascript">
    var selectedValues;
    
    $('#example-treeview').datatreeview(function(treeview) {
        // this refers to the datatreeview object
        selectedValues = this.getSelectedValues();
        
        // parameter treeview also refers to the datatreeview object
        treeview.clearSelectedItems();
    });
</script>

When also providing options to the datatreeview, the callback function becomes the second parameter of the call to the datatreeview function.

<script type="text/javascript">
    var options = {
        data: [{ text: 'Foo', value: 'Foo'}]
    };
    $('#example-treeview').datatreeview(options, function () {
        console.log(this.getSelectedValues());
    });
</script>

Please note that this gives you access to the datatreeview internal properties. Manipulating these properties is unsupported and can create unexpected side effects.

• General
  • remove() removes the dropdownlist functionality and restores the elements to their original condition
  • enable() enables the dropdownlist and its form fields if it is currently disabled
  • disable() disables the dropdownlist and its form fields if it is currently enabled
• Selection
  • getSelectedValues() returns an array of currently selected values
  • getSelectedData() returns an array of currently selected data nodes
  • getSelectedNodes() returns a jQuery object containing currently selected treeview nodes
  • setSelectedValues(values) sets the selected nodes to the items that have one of the values in the values array
  • setSelectedData(filter) sets the selected nodes to the items whose data matches the filter function; the function gets called with the node data as a parameter
  • setSelectedNodes(selector) sets the selected nodes to the items matching the provided selection or selector
• Node interaction
  • collapseNodes(nodes) collapses the nodes in the nodes selector
  • expandNodes(nodes) expands the nodes in the nodes selector
• Internal functions
  • createElement(tagName, className, attr1, ..., attrN) creates elements with the appropriate attributes
  • createList(node, dataArray) creates a treeview node list as an unordered list
  • createNode(list, data) creates a treeview node as a list item
  • triggerSelectionChanged() triggers the datatreeview.selectionChanged event