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

Example

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

collapse: Animation

The animation that will be used when collapsing items.

duration: Number(default: 200)

The number of milliseconds used for the animation when a node is expanded.

Example

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

effects: String

A whitespace-delimited string of animation effects that are utilized when a TreeView node is collapsed. Options include "fadeOut".

Example

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

expand: Animation

The animation that will be used when expanding items.

duration: Number(default: 200)

The number of milliseconds used for the animation when a node is expanded.

Example

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

effects: String(default: "expandVertical")

A whitespace-delimited string of animation effects that are utilized when a TreeView node is expanded. Options include "expandVertical" and "fadeIn".

Example

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

show: Boolean(default: true)

Template for rendering of the treeview checkboxes.

Example

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

The data that the TreeView will be bound to.

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

Template for rendering of the nodes of the treeview.

Example

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