KO Tree Binding

Data-binding options:

allowTriState
autoCheckNodes
autoCollapse
disabled
nodes
showCheckBoxes
showExpandCollapse

Example:

In this example, the ViewModel is defined specifically for use with the tree. It has disabled, allowTriState, autoCheckNodes, autoCollapse, showCheckBoxes, showExpandCollapse and nodes properties that are bound in the View. If any of these values change, the widgets automatically respond to them. The widgets also update the ViewModel values as they modify them. The tree shows checkboxes for each item and the expanded node collaspes if another node is expanded.

Create a ViewModel:

ViewModel Script	Copy Code
var viewModel = { disabled: ko.observable(false), allowTriState: ko.observable(true), autoCheckNodes: ko.observable(true), autoCollapse: ko.observable(true), showCheckBoxes: ko.observable(true), showExpandCollapse: ko.observable(true), nodes: ko.observableArray([ {text: 'Folder 1', expanded: true, selected: true, checked: true, nodes: [{ text: 'Folder 1.1', nodes: [ {text: 'File 1.1.1'}, {text: 'File 1.1.2'}, {text: 'File 1.1.3'}, {text: 'File 1.1.4'}, {text: 'File 1.1.5'} ] }, {text: 'File 1.2'}, {text: 'File 1.3'}, {text: 'File 1.4'}, {text: 'File 1.5'} ] }, {text: 'Folder 2', nodes: [ {text: 'File 2.1'}, {text: 'File 2.2'}, {text: 'File 2.3'}, {text: 'File 2.4'}, {text: 'File 2.5'} ] }, {text: 'Folder 3', nodes: [ {text: 'File 3.1'}, {text: 'File 3.2'}, {text: 'File 3.3'}, {text: 'File 3.4'}, {text: 'File 3.5'} ] }, {text: 'File 4'}, {text: 'File 5'} ]) };

ViewModel Script

Copy Code

var viewModel = {
    disabled: ko.observable(false), 
    allowTriState: ko.observable(true), 
    autoCheckNodes: ko.observable(true), 
    autoCollapse: ko.observable(true), 
    showCheckBoxes: ko.observable(true), 
    showExpandCollapse: ko.observable(true), 
    nodes: ko.observableArray([     
        {text: 'Folder 1',     
        expanded: true, 
        selected: true,     
        checked: true,     
        nodes: [{     
            text: 'Folder 1.1', 
            nodes: [     
                {text: 'File 1.1.1'},
                {text: 'File 1.1.2'},
                {text: 'File 1.1.3'},
                {text: 'File 1.1.4'},
                {text: 'File 1.1.5'}
            ] },
            {text: 'File 1.2'},
            {text: 'File 1.3'},
            {text: 'File 1.4'},
            {text: 'File 1.5'}
        ] },
        {text: 'Folder 2', 
            nodes: [
                {text: 'File 2.1'},
                {text: 'File 2.2'},
                {text: 'File 2.3'},
                {text: 'File 2.4'},
                {text: 'File 2.5'}
            ] 
        },
        {text: 'Folder 3', 
                nodes: [
                    {text: 'File 3.1'},
                    {text: 'File 3.2'},
                    {text: 'File 3.3'},
                    {text: 'File 3.4'},
                    {text: 'File 3.5'}
                ] 
        }, 
        {text: 'File 4'}, 
        {text: 'File 5'}
    ]) 
};

Create View with Bound Controls:

View Markup	Copy Code
<ul data-bind="wijtree: { disabled: disabled, allowTriState: allowTriState, nodes: nodes, autoCheckNodes: autoCheckNodes, autoCollapse: autoCollapse, showCheckBoxes: showCheckBoxes, showExpandCollapse: showExpandCollapse }"></ul>

View Markup

Copy Code

<ul data-bind="wijtree: {    disabled: disabled,     allowTriState: allowTriState,     nodes: nodes,     autoCheckNodes: autoCheckNodes,     autoCollapse: autoCollapse,     showCheckBoxes: showCheckBoxes,     showExpandCollapse: showExpandCollapse }"></ul>

Concepts

Knockout

Two-Way Live Binding

wijtree API

Widgets

Tree