TreeView Problems i am facing

Posted by Asjad under ASP.NET on 12/7/2010 | Points: 10 | Views : 2311 | Status : [Member] | Replies : 3
Hi I am new to ASP.NET using C#, My task is to create a TreeView

<asp:TreeView Id="MyTree" SkinId="News" ShowCheckBoxes="All" runat="server">
<Nodes>
<asp:TreeNode Text="news.microsoft.com" ShowCheckBox="false" Expanded="true">
<asp:TreeNode Text=" microsoft.public.dotnet.framework.aspnet" Checked="true"/>
<asp:TreeNode Text=" microsoft.public.dotnet.framework.aspnet.mobile" />
<asp:TreeNode Text=" microsoft.public.dotnet.framework.aspnet.webservices" />
</asp:TreeNode>
</Nodes>
</asp:TreeView>

which used check boxes. Two Important Thing i need are :

Once a parent Node is ticked automatically all child..... nodes should be ticked

2nd task is i want to get 2 drop down menu which will be

Drop down menu 1 ---- show all values of Level 1 nodes
Drop Down Menu 2 ----- Show all values of level 2 nodes

Please help if you knw, any helpful article of code will be much appreciated.

Thanks




Responses

Posted by: Girinarra on: 12/7/2010 [Member] Starter | Points: 25

Up
0
Down
Hi

Try the below code Hopefully it works for you....


<script type="text/javascript" language="javascript">
function SelectAllChildNodes()
{
//debugger;
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 (iCount=0; iCount < numTables; iCount++)
{
if (tables[iCount] == obj)
{
treeNodeFound = true;
iCount++;
if (iCount == numTables)
{
return;
}
}
if (treeNodeFound == true)
{
var childTreeLevel = tables[iCount].rows[0].cells.length;
if (childTreeLevel > parentTreeLevel)
{
var cell = tables[iCount].rows[0].cells[childTreeLevel - 1];
var inputs = cell.getElementsByTagName("INPUT");
inputs[0].checked = checkedState;
}
else
{
return;
}
}
}
}
}
}
</script>

Finally, call the function in "onClick" event of TreeView Control as,

<asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All" onclick="SelectAllChildNodes()">
<Nodes>
<%--TreeView Nodes--%>
</Nodes>
</asp:TreeView>

Asjad, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Girinarra on: 12/7/2010 [Member] Starter | Points: 25

Up
0
Down
Its a very common requirement to have the parent-child check behaviour in asp.nettreeview. To define the problem:
1)Check all the child nodes if the parent is checked and uncheck all child nodes if parent is unchecked ( well, this part is simple).

2)If a node at any level is checked and all its siblings are already checked then the parent node should be checked and the same should apply for the parent node(i.e., if its siblings are checked..), this should happen till the root node.

3)If a node at any level is unchecked then the parents( ma, grand ma, grand grand ma..) up to the root node must be unchecked.

Well there have been scripts on the net that only half accomplished the task(check footnotes). So I wrote the script that solves the problem completely, upto best of my knowledge. I've tested in IE 7 and Firefox 2.0, hope it works fine for you all.

Here's how to implement it:
Step 1: In the page load in code behind file add an attribute to the treeview as:
If(!isPostBack)
{
TreeView1.Attributes.Add("onclick","OnTreeClick(event)");
}

The desired affect could also be accomplished by direclty adding the attribute to the treeview tag in .aspx file as:<asp:treeview onclick="OnTreeClick(event)". which would cause Visual Studio to display a warning but it works anyway but the codebehind way of doint it is the right way.

Step 2: Put the below script in the head section of your .aspx page:
function OnTreeClick(evt)
{
var src = window.event != window.undefined ? window.event.srcElement : evt.target;
var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "checkbox");
if(isChkBoxClick)
{
var parentTable = GetParentByTagName("table", src);
var nxtSibling = parentTable.nextSibling;
//check if nxt sibling is not null & is an element node
if(nxtSibling && nxtSibling.nodeType == 1)
{
if(nxtSibling.tagName.toLowerCase() == "div") //if node has children
{
//check or uncheck children at all levels
CheckUncheckChildren(parentTable.nextSibling, src.checked);
}
}
//check or uncheck parents at all levels
CheckUncheckParents(src, src.checked);
}
}

function CheckUncheckChildren(childContainer, check)
{
var childChkBoxes = childContainer.getElementsByTagName("input");
var childChkBoxCount = childChkBoxes.length;
for(var i=0;i<checkBoxCount;i++)
{
childChkBoxes[i].checked = check;
}
}

function CheckUncheckParents(srcChild, check)
{
var parentDiv = GetParentByTagName("div", srcChild);
var parentNodeTable = parentDiv.previousSibling;
if(parentNodeTable)
{
var checkUncheckSwitch;
if(check) //checkbox checked
{
var isAllSiblingsChecked = AreAllSiblingsChecked(srcChild);
if(isAllSiblingsChecked)
checkUncheckSwitch = true;
else
return; //do not need to check parent if any(one or more) child not checked
}
else //checkbox unchecked
{
checkUncheckSwitch = false;
}var inpElemsInParentTable = parentNodeTable.getElementsByTagName("input");
if(inpElemsInParentTable.length > 0)
{
var parentNodeChkBox = inpElemsInParentTable[0];
parentNodeChkBox.checked = checkUncheckSwitch;
//do the same recursively
CheckUncheckParents(parentNodeChkBox, checkUncheckSwitch);
}
}
}

function AreAllSiblingsChecked(chkBox)
{
var parentDiv = GetParentByTagName("div", chkBox);
var childCount = parentDiv.childNodes.length;
for(var i=0;i<childCount;i++)
{
if(parentDiv.childNodes[i].nodeType == 1)
{
//check if the child node is an element node
if(parentDiv.childNodes[i].tagName.toLowerCase() == "table")
{
var prevChkBox = parentDiv.childNodes[i].getElementsByTagName("input")[0];
//if any of sibling nodes are not checked, return false
if(!prevChkBox.checked)
{
return false;
}
}
}
}
return true;
}
//utility function to get the container of an element by tagname

function GetParentByTagName(parentTagName, childElementObj)
{
var parent = childElementObj.parentNode;
while(parent.tagName.toLowerCase() != parentTagName.toLowerCase())
{
parent = parent.parentNode;
}
return parent;
}
Get Formatted Version Of Above Script
The script is pretty much self explanatory with function names saying it all.

Hope this is helpful.

Asjad, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Asjad on: 2/24/2011 [Member] Starter | Points: 25

Up
0
Down
Hi

Thanks for your reply, Your code is working fine but there is one issue that its not expanding the child nodes or collapsing the child nodes on Tick or Untick.....

Please add that bit so this code will be perfectly useable

Thanks

Asjad, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response