Checkboxes
29 Jun 20189 minutes to read
TreeView consists of in-build checkbox option and it can be displayed to the left of the tree node by setting the showCheckbox property as true. It allows you to select more than one node at a time.
Indeterminate Checkboxes
TreeView supports tristate checkboxes in addition with standard two state checkboxes. By default TreeView has been enabled with tristate in checkboxes. You can enable 2-state checkboxes by using autoCheckParentNode as false.
<!--create the TreeView wrapper-->
<div id="treeView"> </div>$(function () {
// initialize and bind the TreeView with local data
$("#treeView").ejTreeView({
showCheckbox: true, // shows each node with checkboxes
autoCheckParentNode: false,// enable 2-state checkboxes
fields: {
dataSource: [
{
text: "Item 1",
child: [
{ text: "Item 1.1" },
{ text: "Item 1.2" }
]
},
{ text: "Item 2" },
{ text: "Item 3" }
]
}
});
});Auto Checkable
By default checkbox state of child nodes depends up on parent node checkbox state and also parent node state gets updated based on child nodes state. You can turn off this option by setting autoCheck as false to make independent parent and child nodes checkboxes.
<!--create the TreeView wrapper-->
<div id="treeView"> </div>$(function () {
// initialize and bind the TreeView with local data
$("#treeView").ejTreeView({
showCheckbox: true, // shows each node with checkboxes
autoCheck: false,// turns off auto check of parent and child nodes
fields: {
dataSource: [
{
text: "Item 1",
child: [
{ text: "Item 1.1" },
{ text: "Item 1.2" }
]
},
{ text: "Item 2" },
{ text: "Item 3" }
]
}
});
});Check or Uncheck Node
Tree node can be checked or unchecked using checkNode and uncheckNode methods while showCheckbox property is enabled in TreeView. Also you can get or set the checked nodes of TreeView using checkedNodes property, which indicates the checked nodes index collection as array. The nodeCheck and nodeUncheck event occurs based on checkbox state.
You can use isNodeChecked method to check the particular TreeView node is checked or unchecked. Also you can use checkAll method to check all the nodes in TreeView.
//create an instance from an existing TreeView.
// only after control creation we can get treeObj otherwise it throws exception.
treeObj = $("#treeView").ejTreeView('instance');
//to check node
treeObj.checkNode("2");
//to uncheck node
treeObj.uncheckNode("2");Get Checked Nodes
To get checked nodes of TreeView, you can use getCheckedNodes method. It returns the collection of tree node.
Also you can get currently checked nodes indexes in TreeView by using getCheckedNodesIndex method.
<!--create the TreeView wrapper-->
<div id="treeView"> </div>$(function () {
// initialize and bind the TreeView with local data
$("#treeView").ejTreeView({
showCheckbox: true, // shows each node with checkboxes
autoCheck: false,// turns off auto check of parent and child nodes
fields: {
dataSource: [
{
text: "Item 1",
child: [
{ text: "Item 1.1" },
{ text: "Item 1.2" }
]
},
{ text: "Item 2" },
{ text: "Item 3" }
]
}
});
});
function onClick() {
//create an instance from an existing TreeView.
// only after control creation we can get treeObj otherwise it throws exception.
treeObj = $("#treeView").ejTreeView('instance');
//to get checked nodes
treeObj.getCheckedNodes();
}