Selecting CheckBoxes Inside TreeView Control
In the last article I explained that how you can populate the TreeView control with the data
coming from the database. You can read the new article at Populating TreeView Control With Database. In this article I will explain that how you can select checkboxes which are inside the TreeView control.
Populating the TreeView Control:
The first task is to populate the TreeView control. I have authored a detailed article which
focuses on how to populate the TreeView control using the database. I highly recommend that you check out the article, Populating TreeView Control With Database.
Selecting CheckBoxes Through JavaScript:
For this article, I would like to thank Harish Ranganathan for his excellent piece of JavaScript. You can view Harish's entry on his blog here. Let's take a look at the code below:
| <script language="javascript">
function SelectTreeNodes()
{
var obj = window.event.srcElement;
var treeNodeFound
= false;
var checkedState;
if (obj.tagName
== "INPUT" && obj.type == "checkbox") {
var treeNode =
obj;
checkedState = treeNode.checked;
do
{
obj = obj.parentElement;
} while (obj.tagName != "TABLE")
var parentTreeLevel
= obj.rows[0].cells.length;
var parentTreeNode
= obj.rows[0].cells[0];
var tables = obj.parentElement.getElementsByTagName("TABLE");
var numTables =
tables.length
if (numTables >=
1)
{
for (i=0; i <
numTables; i++)
{
if (tables[i] ==
obj)
{
treeNodeFound = true;
i++;
if (i == numTables)
{
return;
}
}
if (treeNodeFound
== true)
{
var childTreeLevel
= tables[i].rows[0].cells.length;
if (childTreeLevel
> parentTreeLevel)
{
var cell = tables[i].rows[0].cells[childTreeLevel
- 1];
var inputs = cell.getElementsByTagName("INPUT");
inputs[0].checked = checkedState;
}
else
{
return;
}
}
}
}
}
}
</script>
|
The code above selects and deselects the checkboxes inside the TreeView control.
Getting the Checked Items:
The last task is to get the selected items from the TreeView control. I have used the Button
control to get the selected items. You can use any ASP.NET control that you desire. Take a look at the code below.
| // Get all the checked items
protected void Btn_GetCheckedItems_Click(object sender, EventArgs e)
{
// Clear the label
lblItems.Text = String.Empty;
foreach (TreeNode node in tvCategories.Nodes)
{
// check if the parent node is selected
if (node.Checked)
{
lblItems.Text += node.Text;
lblItems.Text += System.Environment.NewLine;
}
// get the child nodes
TreeNodeCollection childNodes
= node.ChildNodes;
// iterate through the child nodes
foreach (TreeNode childNode in childNodes)
{
if (childNode.Checked)
{
lblItems.Text += childNode.Text;
lblItems.Text += System.Environment.NewLine;
}
}
}
} |
In the code above I iterated through the TreeView nodes. There are two iterations going on, the
outer iteration will check for the categories being selected and the inner iteration will check for the products being selected.
Most of the time you will only require the inner iteration. When the button is clicked all the selected items are displayed
on the screen.
Conclusion:
In this article you learned that how you can select the checkboxes which reside inside the TreeView
control. In later articles I will explain more cool stuff that you can do with the TreeView control.
I hope you liked the article, happy coding!
Download Source Code
