<%@ 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>