A collection of visual animations used when items are expanded or collapsed through user interaction. Setting this option to false will disable all animations.

$("#treeView").kendoTreeView({
    animation: {
        expand: {
            duration: 200,
            hide: true,
            show: false
        },
        collapse: {
            duration: 200,
            effects: "expandVertical",
            show: true
        }
    }
});

$("#treeView").kendoTreeView({
    animation: {
        collapse: {
            duration: 1000
        }
    }
});

$("#treeView").kendoTreeView({
    animation: {
        collapse: {
            duration: 5000,
            effects: "fadeOut"
        }
    }
});

$("#treeView").kendoTreeView({
    animation: {
        expand: {
            duration: 1000
        }
    }
});

$("#treeView").kendoTreeView({
    animation: {
        expand: {
            duration: 5000,
            effects: "expandVertical fadeIn"
        }
    }
});

Template for rendering of the treeview checkboxes.

$("#treeview").kendoTreeView({
    template: kendo.template(
        "<input type='checkbox' name='checkedFiles[" +
            item.id +
        "]' value='true' />"
    )
});

Sets the field of the data item that provides the image URL of the treeview nodes.

var items = [
    { id: 1, text: "Tea", image: "tea.png" },
    { id: 2, text: "Coffee", image: "coffee.png" }
];

$("#treeview").kendoTreeView({
    dataSource: items,
    dataImageUrlField: "image"
});

The data that the TreeView will be bound to.

Sets the field of the data item that provides the sprite CSS class of the treeview nodes.

var items = [
    { id: 1, text: "Tea", sprite: "icon-tea" },
    { id: 2, text: "Coffee", sprite: "icon-coffee" }
];

$("#treeview").kendoTreeView({
    dataSource: items,
    dataSpriteCssClassField: "sprite"
});

Sets the field of the data item that provides the text content of the treeview nodes.

var items = [ { id: 1, ProductName: "Tea" }, { id: 2, ProductName: "Coffee"} ];
$("#treeview").kendoTreeView({
    dataSource: items,
    dataTextField: "ProductName"
});

Sets the field of the data item that provides the link URL of the treeview nodes.

var items = [
    { id: 1, text: "Tea", LinksTo: "http://tea.example.com" },
    { id: 2, text: "Coffee", LinksTo: "http://coffee.example.com" }
];

$("#treeview").kendoTreeView({
    dataSource: items,
    dataUrlField: "LinksTo"
});

Disables (false) or enables (true) drag-and-drop on the nodes of a TreeView.

Indicates whether the child datasources should be fetched lazily, when parent groups get expanded. Setting this to false causes all child dataSources to be loaded at initialization time. Note: when initializing a TreeView from array (rather than from a HierarchicalDataSource instance), the default value of this option is false.

Template for rendering of the nodes of the treeview.

$("#treeview").kendoTreeView({
    template: "#= item.text # <a href='\\#'>Delete</a>"
});