ASP.NET Tree. ExpertTree - XML and CSS based DHTML Server-Side Tree Control for ASP.NET

<%@ Control Language="c#" AutoEventWireup="false" %>
<%@ Register TagPrefix="ec" Namespace="ASPNETExpert.WebControls" Assembly="ASPNETExpert.WebControls" %>
<%@ Register TagPrefix="ecd" Namespace="ASPNETExpert.WebControls.DemoControls" Assembly="ASPNETExpert.WebControls.DemoControls" %>
<script language="javascript">
function BeforeCheckedChangedHandler(node) {
  if(!node.Checked()) {
    CheckSubNodes(node);    
    node.Expand(true);
  }    
  if(node.Checked()) {
    UnCheckSubNodes(node);    
    node.Collapse(true);
  }
  return true;  
}
function AfterCheckedChangedHandler(node) {
  FillCheckedNodes();
}
function CheckSubNodes(node) {  
  for(var subNode in node.GetNodes()) {
    node.GetNodes()[subNode].Check();    
    CheckSubNodes(node.GetNodes()[subNode]);
  }
}
function UnCheckSubNodes(node) {
  for(var subNode in node.GetNodes()) {
    node.GetNodes()[subNode].UnCheck();
    UnCheckSubNodes(node.GetNodes()[subNode]);
  }
}
function FillCheckedNodes() {
  var elem = document.getElementById("CheckedNodesList");
  if(elem)
    elem.innerHTML = GetCheckedNodesHTML();
}
function GetCheckedNodesHTML() {
  var result = '';
  var tree = ec_GetTree('<%=CheckBoxesCUTree.UniqueID%>');
  if(tree != null)
  {
    var checkedNodes = tree.GetCheckedNodes();
    for(var node in checkedNodes)
      result += '<b>' + checkedNodes[node].Value + ':</b> ' + checkedNodes[node].Text + '<br>';
  }
  return result;
}
</script>
<table cellpadding="0" cellspacing="5" border="0" xmlns:ec="urn:http://aspnetexpert.com/ExpertControls.xsd">
  <tr>
    <td valign=top>
      <table cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td>
<ec:ExpertTree id="CheckBoxesCUTree" runat="server" Skin="XP" EnableViewState="false" ExpandOnClick="true" CollapseOnClick="true">    
  <OnClientBefore NodeCheckedChangedHandler="BeforeCheckedChangedHandler" />
  <OnClientAfter NodeCheckedChangedHandler="AfterCheckedChangedHandler" />
  <TreeLook Width="220" Height="320px" Overflow="Scroll" />
  <Nodes>
    <ec:TreeNode Text="North America" Expanded="true" Value="Continent" IsCheckable="true" >
      <Nodes>
        <ec:TreeNode Text="U.S.A." Expanded="true" Value="Country" IsCheckable="true" >
          <Nodes>
            <ec:TreeNode Text="New York" Look-InitLook-TextSection-Padding-Left="24px" Value="City"/>
            <ec:TreeNode Text="Los Angeles" Value="City" IsCheckable="true" />
            <ec:TreeNode Text="Boston"  Look-InitLook-TextSection-Padding-Left="24px" Value="City"/>
            <ec:TreeNode Text="Chicago" Value="City" IsCheckable="true" />
          </Nodes>  
        </ec:TreeNode>
        <ec:TreeNode Text="Canada" Value="Country" IsCheckable="true" >
          <Nodes>
            <ec:TreeNode Text="Toronto"  Look-InitLook-TextSection-Padding-Left="24px" Value="City"/>
            <ec:TreeNode Text="Vancouver" Value="City" IsCheckable="true" />
            <ec:TreeNode Text="Calgary"  Look-InitLook-TextSection-Padding-Left="24px" Value="City"/>
            <ec:TreeNode Text="Ottawa" Value="City" IsCheckable="true" />
          </Nodes>  
        </ec:TreeNode>
        <ec:TreeNode Text="Mexico" Value="Country" IsCheckable="true" >
          <Nodes>
            <ec:TreeNode Text="Campeche" Look-InitLook-TextSection-Padding-Left="24px" Value="City"/>
            <ec:TreeNode Text="Guadalajara" Value="City" IsCheckable="true" />
            <ec:TreeNode Text="Mexico City" Look-InitLook-TextSection-Padding-Left="24px" Value="City"/>
            <ec:TreeNode Text="Puebla" Value="City" IsCheckable="true" />
          </Nodes>  
        </ec:TreeNode>
      </Nodes>  
    </ec:TreeNode>
    <ec:TreeNode Text="Europe" Value="Continent" IsCheckable="true" >
      <Nodes>
        <ec:TreeNode Text="England" Value="Country" IsCheckable="true" >
          <Nodes>
            <ec:TreeNode Text="London" Look-InitLook-TextSection-Padding-Left="24px" Value="City"/>
            <ec:TreeNode Text="Liverpool" Value="City" IsCheckable="true" />
            <ec:TreeNode Text="Leeds" Look-InitLook-TextSection-Padding-Left="24px" Value="City"/>
            <ec:TreeNode Text="Manchester" Value="City" IsCheckable="true" />
          </Nodes>  
        </ec:TreeNode>
        <ec:TreeNode Text="France" Value="Country" IsCheckable="true" >
          <Nodes>
            <ec:TreeNode Text="Paris" Look-InitLook-TextSection-Padding-Left="24px" Value="City"/>
            <ec:TreeNode Text="Cannes" Value="City" IsCheckable="true"  />
            <ec:TreeNode Text="Grenoble" Look-InitLook-TextSection-Padding-Left="24px" Value="City"/>
            <ec:TreeNode Text="Toulouse" Value="City" IsCheckable="true" />
          </Nodes>  
        </ec:TreeNode>
        <ec:TreeNode Text="Germany" Value="Country" IsCheckable="true" >
          <Nodes>
            <ec:TreeNode Text="Berlin" Look-InitLook-TextSection-Padding-Left="24px" Value="City"/>
            <ec:TreeNode Text="Bonn" Value="City" IsCheckable="true" />
            <ec:TreeNode Text="Bremen" Look-InitLook-TextSection-Padding-Left="24px" Value="City"/>
            <ec:TreeNode Text="Munich" Value="City" IsCheckable="true" />
          </Nodes>  
        </ec:TreeNode>
      </Nodes>  
    </ec:TreeNode>  
    <ec:TreeNode Text="South America" Value="Continent" IsCheckable="true" >
      <Nodes>
        <ec:TreeNode Text="Brasil" Value="Country" IsCheckable="true" >
          <Nodes>
            <ec:TreeNode Text="Rio de Janeiro" Look-InitLook-TextSection-Padding-Left="24px" Value="City"/>
            <ec:TreeNode Text="Sao Paulo" Value="City" IsCheckable="true" />
            <ec:TreeNode Text="Campinas" Look-InitLook-TextSection-Padding-Left="24px" Value="City"/>
            <ec:TreeNode Text="Brasilia" Value="City" IsCheckable="true" />
          </Nodes>  
        </ec:TreeNode>
        <ec:TreeNode Text="Argentina" Value="Country" IsCheckable="true" >
          <Nodes>
            <ec:TreeNode Text="Buenos Aires" Look-InitLook-TextSection-Padding-Left="24px" Value="City"/>
            <ec:TreeNode Text="Cordoba" Value="City" IsCheckable="true" />      
          </Nodes>  
        </ec:TreeNode>
        <ec:TreeNode Text="Chile" Value="Country" IsCheckable="true" >
          <Nodes>
            <ec:TreeNode Text="Arica" Look-InitLook-TextSection-Padding-Left="24px" Value="City"/>
            <ec:TreeNode Text="Copiapo" Value="City" IsCheckable="true" />
            <ec:TreeNode Text="Puerto Montt" Look-InitLook-TextSection-Padding-Left="24px" Value="City"/>
          </Nodes>  
        </ec:TreeNode>
      </Nodes>  
    </ec:TreeNode>
    <ec:TreeNode Text="Africa" Value="Continent" IsCheckable="true" >
      <Nodes>
        <ec:TreeNode Text="South Africa" Value="Country" IsCheckable="true" >
          <Nodes>
            <ec:TreeNode Text="Cape Town" Look-InitLook-TextSection-Padding-Left="24px" Value="City"/>
            <ec:TreeNode Text="Johannesburg" Value="City" IsCheckable="true" />
            <ec:TreeNode Text="Pretoria" Look-InitLook-TextSection-Padding-Left="24px" Value="City"/>
          </Nodes>  
        </ec:TreeNode>
        <ec:TreeNode Text="Zambia" Value="Country" IsCheckable="true" >
          <Nodes>
            <ec:TreeNode Text="Lusaka" Value="City" IsCheckable="true"  />      
          </Nodes>  
        </ec:TreeNode>
        <ec:TreeNode Text="Zimbabwe" Value="Country" IsCheckable="true" >
          <Nodes>
            <ec:TreeNode Text="Harare" Value="City" IsCheckable="true" />      
          </Nodes>  
        </ec:TreeNode>
      </Nodes>  
    </ec:TreeNode>
  </Nodes>  
</ec:ExpertTree>        
          </td>
        </tr>        
        <tr>  
          <td id="CheckedNodesList" style="padding-top:10px;" class="formtext"></td>
        </tr>
      </table>
    </td>    
    <td valign=top style="padding-left:10px;">
<ecd:DescriptionView runat="server" ID="Descriptionview1">
  <ecd:Description runat="server" ID="Description1">
You can process a number of client-side events with writing custom handlers.
A hadler can be defined to process an event <b>Before</b> it is processed by
the tree control itself, or <b>After</b> it is processed by the tree code.
If your custom <b>Before</b> handler returns <b>false</b>, it cancels event 
and it is not processed by the tree code.
  </ecd:Description>
  <ecd:Description runat="server" ID="Description2">
A custom event handler can be defined at the tree level or at a node level.
A handler at the tree level is the name of a function that receives a node 
as its single argument. A handler at a node level is a code that is directly 
executed in the scope of the node.
  </ecd:Description>
  <ecd:Description runat="server" ID="Description3">
The definition 
  <pre class="aspcode">
<ecd:SyntaxHighlight runat="server" ContentType="ASPX" ID="Syntaxhighlight2">
<OnClientBefore 
  NodeCheckedChangedHandler="BeforeCheckedChangedHandler"/>
<OnClientAfter 
  NodeCheckedChangedHandler="AfterCheckedChangedHandler" />
</ecd:SyntaxHighlight>
  </pre>  
means that <b>BeforeCheckedChangedHandler</b> is the name of handler function that
processes <b>NodeCheckedChanged</b> event before it was processed by the tree.
And <b>AfterCheckedChangedHandler</b> is the name of handler function that
processes <b>NodeCheckedChanged</b> event after it was processed by the tree.
  </ecd:Description>
  <ecd:Description runat="server" ID="Description4">
Note, that return value of <b>Before</b> handler defines whether those event
will be processed or cancelled.
  </ecd:Description>  
</ecd:DescriptionView>
    </td>
  </tr>
</table>
<ec:CodeViewTab id="CodeViewTab1" runat="server">
  <ec:TabItem runat="server" Text="aspx" ID="Tabitem1">
    <pre class="aspcode">
<ecd:SyntaxHighlight runat="server" ContentType="ASPX" OutputFile="Programming/ClientEventsCU.ascx" ID="Syntaxhighlight1" />
    </pre>
  </ec:TabItem>
</ec:CodeViewTab>