This example demonstrates initializing a TreeView widget with no additional options specified.

<ul data-bind="kendoTreeView: {}">
    <li>
        <span>Test 1</span>
        <ul>
            <li>Test 1A</li>
            <li>Test 1B</li>
        </ul>
    </li>
    <li>
        <span>Test2</span>
        <ul>
            <li>Test 2A</li>
            <li>Test 2B</li>
        </ul>
    </li>
</ul>

var ViewModel = function() {};

                            ko.applyBindings(new ViewModel());

This example demonstrates passing additional options in the data-bind attribute. The kendoTreeItem binding can be applied to child elements to control the behavior of individual menu items.

<input type="checkbox" data-bind="checked: isTwoOpen" /> Open 2<br/>
<input type="checkbox" data-bind="checked: twoEnabled" /> Enable 2
<hr/>
<ul data-bind="kendoTreeView: {}">
    <li>
        <span>Test 1</span>
        <ul>
            <li>
                <span>Test 1A</span>
                <ul>
                    <li>Test 1Aa</li>
                    <li>Test 1Ab</li>
                </ul>
            </li>
            <li>Test 1B</li>
        </ul>
    </li>
    <li data-bind="kendoTreeItem: { expanded: isTwoOpen, enabled: twoEnabled, selected: isSelected }">
        <span>Test2</span>
        <ul>
            <li>Test 2A</li>
            <li>Test 2B</li>
        </ul>
    </li>
</ul>

var ViewModel = function() {
    this.twoEnabled = ko.observable(true);
    this.isTwoOpen = ko.observable(false);
    this.isSelected = ko.observable();
};

                            ko.applyBindings(new ViewModel());

This example demonstrates setting global options in ko.bindingHandlers.kendoTreeView.options. This helps to simplify the markup for settings that can be used as a default for all instances of this widget.

<ul data-bind="kendoTreeView: {}">
    <li>
        <span>Test 1</span>
        <ul>
            <li>
                <span>Test 1A</span>
                <ul>
                    <li>Test 1Aa</li>
                    <li>Test 1Ab</li>
                </ul>
            </li>
            <li>Test 1B</li>
        </ul>
    </li>
    <li>
        <span>Test2</span>
        <ul>
            <li>Test 2A</li>
            <li>Test 2B</li>
        </ul>
    </li>
</ul>

var ViewModel = function() {};

ko.bindingHandlers.kendoTreeView.options.animation = false;

                            ko.applyBindings(new ViewModel());