append (nodeData, parentNode)

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

Parameters

nodeData: String|Selector: A JSON-formatted string or selector that specifies the node to be appended.
parentNode: Node (optional): The node that will contain the newly appended node. If not specified, the new node will be appended to the root group of the TreeView.

collapse (nodes)

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

Parameters

nodes: Selector: The nodes that are to be collapsed.

dataItem (node)

Returns the dataItem that corresponds to a TreeView node

Parameters

node

detach (node) : jQuery

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;

Parameters

node: Selector: The node that is to be detached.

Returns: jQuery The node that has been detached.

enable (nodes, enable)

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

Parameters

nodes: Selector: The nodes that are to be enabled/disabled.
enable: Boolean (optional, default: true): Whether the nodes should be enabled or disabled.

expand (nodes)

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

Parameters

nodes: Selector: The nodes that are to be expanded.

findByText (text) : jQuery

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

Parameters

text: String: The text that is being searched for.

Returns: jQuery All nodes that have the text.

findByUid (text) : jQueryObject

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 text, "CSS3 is da bomb!"

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

Parameters

text: String: The text that is being searched for.

Returns: jQueryObject All nodes that have the text.

insertAfter (nodeData, referenceNode)

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

Parameters

nodeData: String|Selector: A JSON-formatted string or selector that specifies the node to be inserted.
referenceNode: Node: The node that will be preceed the newly-appended node.

insertBefore (nodeData, referenceNode)

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

Parameters

nodeData: String|Selector: A JSON-formatted string or selector that specifies the node to be inserted.
referenceNode: Node: The node that follows the inserted node.

remove (node)

Removes a node from a TreeView.

Remove the node with ID, firstItem

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

Parameters

node: Selector: The node that is to be removed.

select (node) : Node

Gets or sets the selected node of a TreeView.

Select the node with ID, firstItem

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

Get the currently selected node

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

Parameters

node: Selector (optional): If provided, the node of a TreeView that should be selected.

Returns: Node The selected node of a TreeView.

text (node) : String

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

Parameters

node: Selector: The node of which the text is being retrieved.

Returns: String The text of a node.

toggle (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"));

Parameters

node: Selector: The node that should be toggled.