jQuery datatreeview selection - maikelbos0/VDT GitHub Wiki

By default, the selection of parent and child nodes in the datatreeview is linked. If you check the checkbox on a parent, all child nodes are checked, and if you uncheck the checkbox on a parent, it unchecks all childnodes. Conversely, if you uncheck a child node, all parents are unchecked, and if checking a child node causes all children to be checked, the parents are checked as well.

An implication of this behaviour is that when creating a treeview, or when changing the selection in a treeview, only the selected status of the leaf nodes is taken into consideration, and the selected status of parent nodes is automatically determined. In other words, in automation, setting the selected status of a node that has children does nothing.

There are times when you want to enable freehand selection of nodes in the treeview. This can be accomplished by setting the data-freehand-select property to true on the treeview element. In the below example the first node will be selected while only one of its child nodes is selected.

<div id="example-treeview" data-freehand-select="true"></div>

<script type="text/javascript">
    $('#example-treeview').datatreeview({
        data: [
            {
                value: '1',
                text: 'Foo',
                selected: true,
                children: [
                    { value: '4', text: 'Quux', selected: true },
                    { value: '5', text: 'Quuux' }
                ]
            },
            { value: '2', text: 'Bar', selected: true },
            { value: '3', text: 'Baz' }
        ]
    });
</script>