Solve the checkbox cascade selection of Treeview in Asp.net 2.0

Source: Internet
Author: User

BelowCodeWhen a Treeview node contains a checkbox, the status of its parent and child nodes is consistent. That is, if the parent node is selected, all the child nodes are automatically selected, and vice versa. Select a child node, and select the parent node (including the ancestor node) of this Byte point ).
I also found some methods on the Internet, but I think this is a defect of the Treeview. Therefore, we should implement it inside the control, instead of attaching some external js to control the Treeview, if you have any questions, please leave a message and I will promptly correct them:

Add the following content to the backend CS file:
Protected void page_load (Object sender, eventargs E)
{
// Load sample data only once, when the page is first loaded.
If (! Ispostback)
{
Sampletreeview. Attributes. Add ("onclick", "oncheckevent ()");
}
}
Related JS:
<Script language = "JavaScript">
// Checkbox Click Event
Function oncheckevent ()
{
VaR objnode = event. srcelement;
If (objnode. tagname! = "Input" | objnode. type! = "Checkbox ")
Return;
// Obtain the current Tree node
VaR ck_id = objnode. getattribute ("ID ");
VaR node_id = ck_id.substring (0, ck_id.indexof ("checkbox") + "nodes ";
VaR curtreenode = Document. getelementbyid (node_id );
// Cascade Selection
Setchildcheckbox (curtreenode, objnode. Checked );
Setparentcheckbox (objnode );
}

// Subnode string
VaR childids = "";
// Obtain the child node ID Array
Function getchildidarray (parentnode)
{
If (parentnode = NULL)
Return;
VaR childnodes = parentnode. Children;
VaR COUNT = childnodes. length;
For (VAR I = 0; I <count; I ++)
{
VaR tmpnode = childnodes [I];
If (tmpnode. tagname = "input" & tmpnode. type = "checkbox ")
{
Childids = tmpnode. ID + ":" + childids;
}
Getchildidarray (tmpnode );
}
}

// Set the checkbox of the subnode
Function setchildcheckbox (parentnode, checked)
{
If (parentnode = NULL)
Return;
VaR childnodes = parentnode. Children;
VaR COUNT = childnodes. length;
For (VAR I = 0; I <count; I ++)
{
VaR tmpnode = childnodes [I];
If (tmpnode. tagname = "input" & tmpnode. type = "checkbox ")
{
Tmpnode. Checked = checked;
}
Setchildcheckbox (tmpnode, checked );
}
}

// Set the checkbox of the parent node
Function setparentcheckbox (childnode)
{
If (childnode = NULL)
Return;
VaR parent = childnode. parentnode;
If (parent = NULL | parent = "undefined ")
Return;
Do
{
Parent = parent. parentnode;
}
While (parent & parent. tagname! = "Div ");
If (parent = "undefined" | parent = NULL)
Return;
VaR parentid = parent. getattribute ("ID ");
VaR objparent = Document. getelementbyid (parentid );
Childids = "";
Getchildidarray (objparent );
// Determine the subnode status
Childids = childids. substring (0, childids. Length-1 );
VaR arychild = childids. Split (":");
VaR result = false;
// When the checkbox status of the subnode is true, the checkbox status of the parent node is true; otherwise, the status is false.
For (var I in arychild)
{
VaR childck = Document. getelementbyid (arychild [I]);
If (childck. Checked)
Result = true;
}
Parentid = parentid. Replace ("nodes", "checkbox ");
VaR parentck = Document. getelementbyid (parentid );
If (parentck = NULL)
Return;
If (result)
Parentck. Checked = true;
Else
Parentck. Checked = false;
Setparentcheckbox (parentck );
}
</SCRIPT>

The following is a test script for Treeview:
<Asp: Treeview id = "sampletreeview" runat = "server" showcheckboxes = All>
<Nodes>
<Asp: treenode value = "home"
Navigateurl = ""
TEXT = "home"
Target = "content"
Expanded = "true"
Selectaction = selectexpand>

<Asp: treenode value = "1"
Navigateurl = ""
TEXT = "page1"
Target = "content">
<Asp: treenode value = "2"
Navigateurl = ""
TEXT = "section 1"
Target = "content">
<Asp: treenode value = "3"
Navigateurl = ""
TEXT = "section 1"
Target = "content"/>
<Asp: treenode value = "4"
Navigateurl = ""
TEXT = "section 1"
Target = "content"/>
</ASP: treenode>
<Asp: treenode value = "5"
Navigateurl = ""
TEXT = "section 2"
Target = "content">
</ASP: treenode>
</ASP: treenode>

<Asp: treenode value = "6"
Navigateurl = ""
TEXT = "Page 2"
Target = "content">
<Asp: treenode value = "7"
Navigateurl = ""
TEXT = "section 1"
Target = "content">
</ASP: treenode>
<Asp: treenode value = "8"
Navigateurl = ""
TEXT = "section 2"
Target = "content">
</ASP: treenode>
</ASP: treenode>
</ASP: treenode>
</Nodes>
</ASP: Treeview>
The script runs normally in vs2005 and no error is reported.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.