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
        }
    }
});

The animation that will be used when collapsing items.

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

Example

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

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"
        }
    }
});

The animation that will be used when expanding items.

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

Example

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

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"
        }
    }
});

If set to false the widget will not bind to the data source during initialization. In this case data binding will occur when the change event of the data source is fired. By default the widget will bind to the data source specified in the configuration.

Example - disable automatic binding

<div id="treeview"></div>
<script>
var dataSource = new kendo.data.HierarchicalDataSource({
  data: [ { text: "Jane Doe" }, { text: "John Doe" }]
});
$("#treeview").kendoTreeView({
  autoBind: false,
  dataSource: dataSource
});
dataSource.read(); // "read()" will fire the "change" event of the dataSource and the widget will be bound
</script>

If true or an object, renders checkboxes within each treeview item.

Example

$("#treeview").kendoTreeView({
    checkboxes: true
});

Indicates the name of the checkbox inputs that will be posted to the server.

$("#treeview").kendoTreeView({
    checkboxes: {
        // renders <input type='checkbox' name='checkedItems[]' />
        name: "checkedItems[]"
    }
});

Indicates whether checkboxes of child items should get checked when the checkbox of a parent item is checked.

Example

$("#treeview").kendoTreeView({
    checkboxes: {
        checkChildren: true
    }
});

Template for the checkbox rendering. Used to set the checkbox name attribute, or to add hidden inputs that will be posted along the checkboxes.

Example

$("#treeview").kendoTreeView({
    checkboxes: {
        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.

Example

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.

Example

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. If an array, each level uses the field that is at the same index in the array, or the last item in the array.

Example

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

Using different fields on different levels

var items = [
    { CategoryName: "Hot drinks", items: [
        { ProductName: "Tea", items: [
            { ProductName: "Green Tea" },
            { ProductName: "White Tea" }
        ] },
        { ProductName: "Coffee"}
    ] }
];

$("#treeview").kendoTreeView({
    dataSource: items,
    dataTextField: [ "CategoryName", "ProductName" ]
});

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

Example

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.

Example

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

Appends a node to a group of a TreeView. This method may also be used to reorder the nodes of a TreeView.

Append a new node with the text, "HTML5" to the node with ID, firstItem

var treeView = $("#treeView").data("kendoTreeView");
treeView.append({ text: "HTML5" }, $("#firstItem"));

Moves the node with ID, secondNode as a last child of the node with ID, firstItem

var treeView = $("#treeView").data("kendoTreeView");
treeView.append($("#secondNode"), $("#firstItem"));

Collapses nodes.

Example

var treeview = $("#treeview").data("kendoTreeView");

// collapse the node with id="firstItem"
treeview.collapse(document.getElementById("firstItem"));

// collapse all nodes
treeview.collapse(".k-item");

Returns the model dataItem that corresponds to a TreeView node

Example

var treeview = $("#treeview").data("kendoTreeView");

var dataItem = treeview.dataItem(".k-item:first");

See also: getting the node data in the select event handler

Returns

kendo.data.Node The model of the item that was passed as a parameter.

Prepares the TreeView for safe removal from DOM. Detaches all event handlers and removes jQuery.data attributes to avoid memory leaks. Calls destroy method of any child Kendo widgets.

Example

var treeView = $("#treeView").data("kendoTreeView");

// detach events
treeView.destroy();

Removes a node from a TreeView, but keeps its jQuery.data() objects.

Remove the node with ID, firstItem

var treeView = $("#treeView").data("kendoTreeView");
var firstItem = $("#firstItem");
firstItem.data("id", 1);
treeview.detach(firstItem);
firstItem.data("id") == 1;

Returns

jQuery The node that has been detached.

Enables or disables nodes.

Example

var treeview = $("#treeview").data("kendoTreeView");

// disable the node with id="firstItem"
treeview.enable(document.getElementById("firstItem"), false);

// enable all nodes
treeview.enable(".k-item");

Expands nodes.

Example

var treeview = $("#treeview").data("kendoTreeView");

// expands the node with id="firstItem"
treeview.expand(document.getElementById("firstItem"));

// expands all nodes
treeview.expand(".k-item");

Searches a TreeView for a node that has specific text.

Search a TreeView for the item that has the text, "CSS3 is da bomb!"

var treeView = $("#treeView").data("kendoTreeView");
var foundNode = treeView.findByText("CSS3 is da bomb!");

Returns

jQuery All nodes that have the text.

Searches a TreeView for a node with the given unique identifier. Applicable when the widget is bound to a HierarchicalDataSource.

Search a TreeView for the item that has the unique id "95c1925d-a779-47fc-8420-b4274f01c037"

var treeView = $("#treeView").data("kendoTreeView");
var node = treeView.findByUid("95c1925d-a779-47fc-8420-b4274f01c037");

If you want to find a node by its id, use the dataSource.get() method and supply its uid to the findByUid method.

Returns

jQuery All nodes that have the text.

Inserts a node after a specified node in a TreeView. This method may also be used to reorder the nodes of a TreeView.

Insert a node with the text, "JavaScript" after the node with ID, firstItem

var treeView = $("#treeView").data("kendoTreeView");
treeView.insertAfter({ text: "JavaScript" }, $("#firstItem"));

Moves a node with ID, secondNode after a node with ID, firstItem

var treeView = $("#treeView").data("kendoTreeView");
treeView.insertAfter($("#secondNode"), $("#firstItem"));

Inserts a node before another node. This method may also be used to reorder the nodes of a TreeView.

Inserts a new node with the text, "CSS3" before the node with ID, firstItem

var treeView = $("#treeView").data("kendoTreeView");
treeView.insertBefore({ text: "CSS3" }, $("#firstItem"));

Moves the node with ID, secondNode before the node with ID, firstItem

var treeView = $("#treeView").data("kendoTreeView");
treeView.insertBefore($("#secondNode"), $("#firstItem"));

Gets the parent node of the item

Example

var treeView = $("#treeView").data("kendoTreeView");
var parentNode = treeView.parent($("#firstItem"));

Returns

jQuery The parent node of the given parameter node.

Removes a node from a TreeView.

Remove the node with ID, firstItem

var treeView = $("#treeView").data("kendoTreeView");
treeView.remove($("#firstItem"));

Gets or sets the selected node of a TreeView.

Select the node with HTML id="firstItem"

var treeView = $("#treeView").data("kendoTreeView");
treeView.select($("#firstItem"));

Select the first node in the treeview

var treeView = $("#treeView").data("kendoTreeView");
treeView.select(".k-item:first");

Get the currently selected node

var treeView = $("#treeView").data("kendoTreeView");
var selectedNode = treeView.select();

Unselect all nodes

var treeView = $("#treeView").data("kendoTreeView");
treeView.select($());

Returns

jQuery The selected node of a TreeView.

Sets the dataSource of an existing TreeView and rebinds it.

Example

var dataSource = new kendo.data.HierarchicalDataSource({
    data: [
        { text: "foo" }
    ]
});

$("#treeview").data("kendoTreeView").setDataSource(dataSource);

Gets or sets the text of a node in a TreeView.

Get the text of the node with ID, firstItem

var treeView = $("#treeView").data("kendoTreeView");
var nodeText = treeView.text($("#firstItem"));

Returns

String The text of a node.

Toggles the node of a TreeView between its expanded and collapsed states.

Toggle the state of a node with ID, firstItem

var treeView = $("#treeView").data("kendoTreeView");
treeView.toggle($("#firstItem"));

Triggered before a subgroup gets collapsed.

Triggered after the dataSource change event has been processed (adding/removing items);

Triggered while a node is being dragged.

Show the user that is not permitted to drop nodes outside of the #drop-area element

treeview.data("kendoTreeView").bind("drag", function(e) {
    if ($(e.dropTarget).parents("#drop-area").length ) {
        e.setStatusClass("k-denied");
    }
});

Triggered after a node has been dropped.

Triggered before the dragging of a node starts.

Disable dragging of root nodes

treeview.data("kendoTreeView").bind("dragstart", function(e) {
    if ($(e.sourceNode).parentsUntil(".k-treeview", ".k-item").length == 0) {
        e.preventDefault();
    }
});

Triggered when a node is being dropped.

The difference between e.setValid(false) and e.preventDefault()

Both operations cancel the default drag operation, but the indication to the user is different. e.setValid(false) indicates that the operation was unsuccessful by animating the drag clue to its original position. e.preventDefault() simply removes the clue, as if it has been dropped. As a general rule, use preventDefault to manually handle the drag&drop operation, and setValid(false) to indicate unsuccessful drag&drops.

Triggered before a subgroup gets expanded.

Triggered when the selection has changed (either by the user or through the select method).

Triggered when a node is being selected by the user. Cancellable.

Triggered when the user moves the focus on another node