<%@ Control Language="c#" %>
<%@ Register TagPrefix="ec" Namespace="ASPNETExpert.WebControls" Assembly="ASPNETExpert.WebControls" %>
<%@ Register TagPrefix="ecd" Namespace="ASPNETExpert.WebControls.DemoControls" Assembly="ASPNETExpert.WebControls.DemoControls" %>
<script runat="server" language="C#">
protected void Page_PreRender()
{
CheckStateList.DataBind();
}
</script>
<table cellpadding="0" cellspacing="5" border="0" width="100%" xmlns:ec="urn:http://aspnetexpert.com/ExpertControls.xsd">
<tr>
<td valign=top>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<ec:ExpertTree id="TriCheckStateTree" runat="server" CheckBoxes="true" TriCheckStatePropagation="true" ExpandOnClick="true" CollapseOnClick="true">
<TreeLook Width="320" Height="380px" Overflow="Scroll">
<TristateCheckBoxImageSet>
<BlankBox Width="13px" Height="13px" ImageResourceUrl="CheckBox.BlankBox.gif" />
<CheckBox Width="13px" Height="13px" ImageResourceUrl="CheckBox.CheckBox.gif" />
<SquareBox Width="13px" Height="13px" ImageResourceUrl="CheckBox.SquareBox.gif" />
<BlankBoxHovered Width="13px" Height="13px" ImageResourceUrl="CheckBox.BlankBoxHovered.gif" />
<CheckBoxHovered Width="13px" Height="13px" ImageResourceUrl="CheckBox.CheckBoxHovered.gif" />
<SquareBoxHovered Width="13px" Height="13px" ImageResourceUrl="CheckBox.SquareBoxHovered.gif" />
<BlankBoxPushed Width="13px" Height="13px" ImageResourceUrl="CheckBox.BlankBoxPushed.gif" />
<CheckBoxPushed Width="13px" Height="13px" ImageResourceUrl="CheckBox.CheckBoxPushed.gif" />
<SquareBoxPushed Width="13px" Height="13px" ImageResourceUrl="CheckBox.SquareBoxPushed.gif" />
<BlankBoxDisabled Width="13px" Height="13px" ImageResourceUrl="CheckBox.BlankBoxDisabled.gif" />
<CheckBoxDisabled Width="13px" Height="13px" ImageResourceUrl="CheckBox.CheckBoxDisabled.gif" />
<SquareBoxDisabled Width="13px" Height="13px" ImageResourceUrl="CheckBox.SquareBoxDisabled.gif" />
</TristateCheckBoxImageSet>
</TreeLook>
<Looks>
<ec:TreeNodeLook Id="Parent" BindStrategy="AutoBind">
<InitLook>
<ExpandButton Width="11px" Height="11px" ImageResourceUrl="XP.ExpandButton.gif" />
<NodeIcon Width="18px" Height="18px" />
<CheckBoxLook Width="18px" Padding-Left="5px"/>
<TextSection ForeColor="Black" Font-Name="Tahoma,Verdana,Arial" Font-Size="12px" Padding-Top="2px" Padding-Left="3px" Padding-Bottom="2px" Padding-Right="5px" Cursor="Default" />
</InitLook>
<HoveredLook>
<TextSection ForeColor="#000066" Font-Name="Tahoma,Verdana,Arial" Font-Size="12px" Font-Decoration="Underline" />
</HoveredLook>
<ExpandedLook>
<ExpandButton Width="11px" Height="11px" ImageResourceUrl="XP.CollapseButton.gif" />
</ExpandedLook>
<DisabledLook>
<TextSection ForeColor="#808080" />
</DisabledLook>
</ec:TreeNodeLook>
</Looks>
<Nodes>
<ec:TreeNode Text="Application Server" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/ApplicationServer.gif" Expanded="true">
<Nodes>
<ec:TreeNode Text="Application Server Console" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/ApplicationServerConsole.gif" />
<ec:TreeNode Text="ASP.NET" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/ASPNET.gif" />
<ec:TreeNode Text="Enable network COM+ access" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/NetCOMPlus.gif" />
<ec:TreeNode Text="Enable network DTC access" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/NetDTCAccess.gif" />
<ec:TreeNode Text="Internet Information Services (IIS)" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/IIS.gif" Expanded="true">
<Nodes>
<ec:TreeNode Text="FrontPage 2002 Server Extensions" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/FrontPage.gif" />
<ec:TreeNode Text="Internet Information Services Manager" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/ApplicationServerConsole.gif" />
<ec:TreeNode Text="Internet Printing" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/InternetPrinting.gif" />
<ec:TreeNode Text="NNTP Service" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/NNTPService.gif" />
<ec:TreeNode Text="SMTP Service" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/SMTPService.gif" />
<ec:TreeNode Text="World Wide Web Service" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/WWWService.gif" />
</Nodes>
</ec:TreeNode>
<ec:TreeNode Text="Message Queuing" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/MessageQueuing.gif" />
</Nodes>
</ec:TreeNode>
<ec:TreeNode Text="Certificate Services" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/SertificateServices.gif" Expanded="true">
<Nodes>
<ec:TreeNode Text="Certificate Services CA" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/SertificateServices.gif" />
<ec:TreeNode Text="Certificate Services Web Enrollment Support" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/SertificateServices.gif" />
</Nodes>
</ec:TreeNode>
<ec:TreeNode Text="E-mail Services" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/EMailServices.gif" Expanded="true">
<Nodes>
<ec:TreeNode Text="POP3 Service" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/EMailServices.gif" />
<ec:TreeNode Text="POP3 Service Web Administration" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/EMailServices.gif" />
</Nodes>
</ec:TreeNode>
</Nodes>
</ec:ExpertTree>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<asp:Button Runat="server" ID="ShowButton" Text="Show Selection" />
</tr>
<tr>
<td>
<asp:Repeater Runat="server" ID="CheckStateList" DataSource='<%#TriCheckStateTree.TriStateCheckedNodes%>'>
<HeaderTemplate><table border="0"></HeaderTemplate>
<ItemTemplate>
<tr><td class="formtext"><%#DataBinder.Eval(Container.DataItem, "Path")%> - <%#DataBinder.Eval(Container.DataItem, "CheckState")%></td></tr>
</ItemTemplate>
<FooterTemplate></table></FooterTemplate>
</asp:Repeater>
</td>
</tr>
</table>
</td>
<td valign=top style="PADDING-LEFT:10px">
<ecd:DescriptionView runat="server" ID="Descriptionview1">
<ecd:Description id="Description1" runat="server">
This example simulates selecting installable software components. If you select only
a sub-set of child components, then parent component gets partially checked. If you select
all sub-components, then parent component becomes checked. If you unselect
all sub-components, then parent component becomes unchecked.
</ecd:Description>
<ecd:Description id="Description2" runat="server">
To enable tristate check state behavior, set <b>TriCheckStatePropagation="true"</b> in the tree.
Also, you need to setup the image set for tristate check boxes:
<pre class="aspcode">
<ecd:SyntaxHighlight runat="server" ContentType="ASPX">
<TreeLook>
<TristateCheckBoxImageSet>
<BlankBox Width="13px" Height="13px" ImageResourceUrl="CheckBox.BlankBox.gif" />
<CheckBox Width="13px" Height="13px" ImageResourceUrl="CheckBox.CheckBox.gif" />
<SquareBox Width="13px" Height="13px" ImageResourceUrl="CheckBox.SquareBox.gif" />
<BlankBoxHovered Width="13px" Height="13px" ImageResourceUrl="CheckBox.BlankBoxHovered.gif" />
<CheckBoxHovered Width="13px" Height="13px" ImageResourceUrl="CheckBox.CheckBoxHovered.gif" />
<SquareBoxHovered Width="13px" Height="13px" ImageResourceUrl="CheckBox.SquareBoxHovered.gif" />
<BlankBoxPushed Width="13px" Height="13px" ImageResourceUrl="CheckBox.BlankBoxPushed.gif" />
<CheckBoxPushed Width="13px" Height="13px" ImageResourceUrl="CheckBox.CheckBoxPushed.gif" />
<SquareBoxPushed Width="13px" Height="13px" ImageResourceUrl="CheckBox.SquareBoxPushed.gif" />
<BlankBoxDisabled Width="13px" Height="13px" ImageResourceUrl="CheckBox.BlankBoxDisabled.gif" />
<CheckBoxDisabled Width="13px" Height="13px" ImageResourceUrl="CheckBox.CheckBoxDisabled.gif" />
<SquareBoxDisabled Width="13px" Height="13px" ImageResourceUrl="CheckBox.SquareBoxDisabled.gif" />
</TristateCheckBoxImageSet>
</TreeLook>
</ecd:SyntaxHighlight>
</pre>
<b>Note,</b> if you use one of built-in skins, there is no need to define
<b>TristateCheckBoxImageSet</b>. Just inherit tree look from the skin look:
<pre class="aspcode">
<ecd:SyntaxHighlight runat="server" ContentType="ASPX" ID="Syntaxhighlight2">
<ec:ExpertTree id="ExpertTree1" runat="server" Skin="XP">
<TreeLook Base="XP" />
</ecd:SyntaxHighlight>
</pre>
</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/GreyCheckBoxes.ascx" ID="Syntaxhighlight1"/>
</pre>
</ec:TabItem>
</ec:CodeViewTab>