TreeView for ASP.NET WebForms
Populating C1TreeView Dynamically
Task-Based Help > Populating C1TreeView Dynamically

C1TreeView allows you to populate the control dynamically. The child nodes are loaded using AJAX when the parent node is expanded.

  1. Double-click the C1TreeView control in the Visual Studio Toolbox to add it to your application.
  2. Switch to Source View and  add the following markup to your application to add an <asp:SiteMapDataSource> control:

    <asp:SiteMapDataSource ID="SiteMapDataSource" runat="server" ShowStartingNode="False" />
  3. Locate the markup for the C1TreeView control and edit it to resemble the following:
    Markup
    Copy Code
    <cc1:C1TreeView ID="C1TreeView1" ShowCheckBoxes="true" LoadOnDemand="true" DataSourceID="SiteMapDataSource" ShowExpandCollapse="true"
    DataBindStartLevel="0" Width="350px" runat="server">
    </cc1:C1TreeView>
    
  4. Right-click your project's name in the Solution Explorer and select Add | New Item from the list.
  5. Select Site Map in the Add New Item dialog and click Add. A new Web.sitemap will be added to your application. The Web.sitemap file should open immediately.
  6. Add the following markup to the Web.sitemap file:
    Markup
    Copy Code
    <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
      <siteMapNode url="RootNodeUrl" title="Root Node"  description="Root Node Description" >
        <siteMapNode url="" title="Products"  description="Products" >
          <siteMapNode url="" title="Studio Enterprise"  description="Studio Enterprise">
            <siteMapNode url="" title="Studio for WinForms"  description="Studio for WinForms" />
            <siteMapNode url="" title="Studio for ASP.NET"  description="Studio for ASP.NET" />
            <siteMapNode url="" title="Studio for WPF"  description="Studio for WPF" />
            <siteMapNode url="" title="Studio for Mobile"  description="Studio for Mobile" />
            <siteMapNode url="" title="Studio for ActiveX"  description="Studio for ActiveX" />
            <siteMapNode url="" title="Studio for Silverlight"  description="Studio for Silverlight" />
          </siteMapNode>
          <siteMapNode url="" title="IntelliSpell"  description="IntelliSpell" />
          <siteMapNode url="" title="Report Designer Edition"  description="Report Designer Edition" />
        </siteMapNode>
        <siteMapNode url="" title="Support"  description="Support" >
          <siteMapNode url="" title="Support Services"  description="Support Services" />
          <siteMapNode url="" title="HelpCentral"  description="HelpCentral" />
          <siteMapNode url="" title="Product Forums"  description="Product Forums" />
        </siteMapNode>
        <siteMapNode url="" title="Company"  description="Company" >
          <siteMapNode url="" title="About Us"  description="About Us" />
          <siteMapNode url="" title="Partners"  description="Partners" />
          <siteMapNode url="" title="Contact Us"  description="Contact Us" />
          <siteMapNode url="" title="Join Us"  description="Join Us" />
          <siteMapNode url="" title="Press Center"  description="Press Center" />
          <siteMapNode url="" title="Governance"  description="Governance" />
        </siteMapNode>
        <siteMapNode url="" title="Store"  description="Store">
          <siteMapNode url="" title="Buy Now"  description="Buy Now" />
          <siteMapNode url="" title="Resellers"  description="Resellers" />
        </siteMapNode>
      </siteMapNode>
    </siteMap>
    
  7. Run your application; it should resemble the following image:

    And when you open one of the nodes, the C1TreeView control will resemble the following image:

See Also