Introduction:
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!