This topic will walk you through adding icons to C1TreeExtender's nodes. You will also also learn how you can switch icons based on  C1TreeExtender's current state.

1. Create a new ASP.NET Web Application.
2. In the Visual Studio Toolbox, double-click on a standard Panel control to add it to the main content of your page.
3. Add the following markup within the <asp:Panel> tags to create the list that will become the tree.

<ul>

    <li expandediconclass="ui-icon-folder-open" collapsediconclass="ui-icon-folder-collapsed" class="folder"><a><span>Folder 1</span></a>

<ul>

   <li itemiconclass="ui-icon-document" class="file"><a><span>File 1.1</span></a></li>

   <li itemiconclass="ui-icon-document" class="file"><a><span>File 1.2</span></a></li>

   <li itemiconclass="ui-icon-document" class="file"><a><span>File 1.3</span></a></li>

   <li itemiconclass="ui-icon-document" class="file"><a><span>File 1.4</span></a></li>

   <li itemiconclass="ui-icon-document" class="file"><a><span>File 1.5</span></a></li>

                        </ul>

</li>

   <li itemiconclass="ui-icon-document" class="file"><a><span>File 1.2</span></a></li>

   <li itemiconclass="ui-icon-document" class="file"><a><span>File 1.3</span></a></li>

   <li itemiconclass="ui-icon-document" class="file"><a><span>File 1.4</span></a></li>

   <li itemiconclass="ui-icon-document" class="file"><a><span>File 1.5</span></a></li>

                </ul>

            </li>

<li expandediconclass="ui-icon-folder-open" collapsediconclass="ui-icon-folder-collapsed"

class="folder"><a><span>Folder 2</span></a>

<ul>

   <li itemiconclass="ui-icon-document" class="file"><a><span>File 2.1</span></a></li>

   <li itemiconclass="ui-icon-document" class="file"><a><span>File 2.2</span></a></li>

   <li itemiconclass="ui-icon-document" class="file"><a><span>File 2.3</span></a></li>

   <li itemiconclass="ui-icon-document" class="file"><a><span>File 2.4</span></a></li>

   <li itemiconclass="ui-icon-document" class="file"><a><span>File 2.5</span></a></li>

                </ul>

            </li>

<li expandediconclass="ui-icon-folder-open" collapsediconclass="ui-icon-folder-collapsed"

   class="folder"><a><span>Folder 3</span></a>

<ul>

   <li itemiconclass="ui-icon-document" class="file"><a><span>File 3.1</span></a></li>

   <li itemiconclass="ui-icon-document" class="file"><a><span>File 3.2</span></a></li>

   <li itemiconclass="ui-icon-document" class="file"><a><span>File 3.3</span></a></li>

   <li itemiconclass="ui-icon-document" class="file"><a><span>File 3.4</span></a></li>

   <li itemiconclass="ui-icon-document" class="file"><a><span>File 3.5</span></a></li>

         </ul>

   </li>

</ul>

4. Use the Panel control's smart tag to open the Extender Wizard by clicking Add Extender.
5. Select the C1TreeExtender from the list and click OK to add it to the application.
6. Press F5 to run your application. The C1TreeExtender should appear as in the following image.