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.

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!