PDA

View Full Version : A checked/unchecked TreeNode Sample



msnqu
Jul 04, 2011, 8:45 AM
This is a checked/unchecked TreeNode sample , when the parent node is checked, all child nodes are checked. when all the child nodes are unchecked, the parent node is also unchecked.
part of the bodys of this post I did not wrote, I just wrote a js.

The code is very efficient, especially when the node is much.
The disadvantage of before code is :
1. when the childnode is checked/unchecked,all of parentnodes will be loop.so filter the leaf node "if(!node.attributes.leaf)".
2. need to set the node status: check and indeterminate.



<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>A very efficient checked/unchecked TreeNode Sample</title>
<script type="text/javascript">
//node check
function nodeChecked(node, checked) {
//parentnode code
var parentNode = node.parentNode;
if(parentNode !== null) {
parentCheck(parentNode,checked);
}

//childnode code
childCheck(node,checked);
}
function childCheck(node,checked){
node.expand();
var nodeAttr = node.attributes;
if(!nodeAttr.leaf)//filter leaf,when the leaf is checked, do not loop the parentnode event. great efficiency
{
node.eachChild(function(child){
if (child && child.getUI().checkbox != undefined){
child.getUI().checkbox.checked=checked;
}
childCheck(child,checked);
});
}
}
function parentCheck(node ,checked){
var checkbox = node.getUI().checkbox;
if(typeof checkbox == 'undefined')return ;
var state=this.childHasChecked(node,checked);

if (state==0){//All of the childnodes are unchecked (checked=false and indeterminate=false)
checkbox.checked=false;
checkbox.indeterminate=false;
} else if(state==1){ //All of the childnodes are checked (checked=true and indeterminate=true),in fact,the childnodes are indeterminate,
checkbox.checked=true;
checkbox.indeterminate=true;
}else{ //All of the childnodes are checked , not indeterminate .(checked=true and indeterminate=false)
checkbox.checked=true;
checkbox.indeterminate=false;
}
// checkbox.checked = checked;
node.attributes.checked = checkbox.checked;
node.getOwnerTree().fireEvent('check', node, checked);

var parentNode = node.parentNode;
if(parentNode !== null)
{
this.parentCheck(parentNode,checked);
}
}
function childHasChecked(node,checked) {
var childNodes = node.childNodes;
var retValue=0;
if(childNodes || childNodes.length>0){
for(var i=0;i<childNodes.length;i++){
var checkbox=childNodes[i].getUI().checkbox;

//a. the node is checked and the "indeterminate" is false
//b. Aim of this loop is cancel the selected state. if the childnode has been checked,
// and [ if (indeterminate==true) the node is marked "indeterminate=true" else "checked=false and indeterminate=false" ]
if(!checked){
if (checkbox.checked )return 1;
}else{
retValue=2;
if (!checkbox.checked || (checkbox.checked && checkbox.indeterminate)){
return 1;
}
}
}
}
return retValue;
}
//get checked nodes
function findCheckedNodes(tree){
var checkedNodes = tree.getChecked();//the tree object is treepanel id
var checkedIds = [];
for(var i=0;i<checkedNodes.length;i++){
checkedIds.push(checkedNodes[i].id);
}
return checkedIds.join(',');
}

</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:TreePanel ID="TreePanel1" runat="server" AutoHeight="true">
<Root>
<ext:TreeNode Text="Root (level 0)" Expanded="true" Checked="False">
<Nodes>
<ext:TreeNode Text="Node1 (level 1)" Expanded="true">
<Nodes>
<ext:TreeNode Text="Node1 (level 2)" Expanded="false">
<Nodes>
<ext:TreeNode Text="Node1 (level 3)">
<Listeners>
<CheckChange Fn="nodeChecked" />
</Listeners>
</ext:TreeNode>
<ext:TreeNode Text="Node2 (level 3)">
<Listeners>
<CheckChange Fn="nodeChecked" />
</Listeners>
</ext:TreeNode>
</Nodes>
<Listeners>
<CheckChange Fn="nodeChecked" />
</Listeners>
</ext:TreeNode>
</Nodes>
<Listeners>
<CheckChange Fn="nodeChecked" />
</Listeners>
</ext:TreeNode>
<ext:TreeNode Text="Node2 (level 1)" Expanded="true">
<Nodes>
<ext:TreeNode Text="Node1 (level 2)" Expanded="false">
<Nodes>
<ext:TreeNode Text="Node1 (level 3)" />
<ext:TreeNode Text="Node2 (level 3)" />
</Nodes>
<Listeners>
<CheckChange Fn="nodeChecked" />
</Listeners>
</ext:TreeNode>
</Nodes>
<Listeners>
<CheckChange Fn="nodeChecked" />
</Listeners>
</ext:TreeNode>
</Nodes>
<Listeners>
<CheckChange Fn="nodeChecked" />
</Listeners>
</ext:TreeNode>
</Root>
<Listeners>
<BeforeAppend Handler="node.attributes.checked = false;" />
<%-- To avoid setting .Checked for each node --%>
</Listeners>
</ext:TreePanel>
<ext:Button ID="btnDelete" runat="server" Text="get checked id">
<Listeners>
<Click Handler="alert(findCheckedNodes(TreePanel1));" />
</Listeners>
</ext:Button>
</form>
</body>
</html>

Daniil
Jul 04, 2011, 1:47 PM
Hi,

Can you provide more details about the code you posted?

xeneus
May 25, 2012, 11:27 AM
Hi, congratulations for the project.
I create all nodes by code, but i can not enter the event "CheckChange" because that does not exist in "<node>.Listeners."
How can I do?

When you think of ending the beta?

Best Regards,
Massimo

Daniil
May 29, 2012, 4:18 AM
Hi @xeneus,

I guess you use Ext.NET v2. In this version please use the TreePanel CheckChange listener.

xeneus
May 29, 2012, 9:25 AM
I Daniil,
yes i use v 2.0. I insert listeners "CheckChange" in TreePanel with script view in current post but not function. Can you send a little example of this function.

Code in my .aspx


<ext:TreePanel ID="trwRecordSelect"
runat="server"
Width="350"
PaddingSpec="5; 5; 5; 0"
Region="West">
<Listeners>
<CheckChange Fn="nodeChecked" />
</Listeners>
</ext:TreePanel>


Partial Code in my .cs


...
Node rootNode = new Node();
rootNode.NodeID = string.Format("{0}-{1}", e.Result.ObjectId, e.Result.RecordId);
rootNode.Text = e.Result.ExtendedDescription;
rootNode.Checked = e.Result.IsSelected;
trwRecordSelect.Root.Add(rootNode);
...


Best Regards,
Massimo

Daniil
Jun 04, 2012, 10:09 AM
Well, it appears to be not tightly related with the initial question.

So, please start a new forum thread. If you feel the threads are related, please feel free to cross-link between the two.

farouk
Aug 09, 2012, 11:23 AM
thnx for the code , but can u give us a sample with node not with TreeNode in V2.0