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

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