C1TreeView allows you to set node icons. In addition, you can switch icons based on C1TreeView's current state. This topic will walk you through setting the properties to display node icons and to change node icons based on C1TreeView's state.

In Design View

1. Click the C1TreeView smart tag  to open the C1TreeView Tasks Menu.
2. Click Edit TreeView to open the C1TreeView Designer Form.

   

3. Select the first node, Folder 1, to display its properties in the Properties Window.
4. Locate the CollapsedIconClass property and set it to ui-icon-folder-collapsed.
5. Locate the ExpandedIconClass property and set it to ui-icon-folder-expanded.
6. Locate the ItemIconClass property and set it to ui-icon-document. The Designer Form Properties Window should resemble the following image:

   

7. Press F5 to run your project. Your C1TreeView control should resemble the following image.

   

In Source View

1. In the Source View, locate the first set of <cc1:C1TreeViewNode> tags, the Text property of which should read "Folder 1".
2. Insert the following markup to set the node icons:

   Markup	Copy Code
   CollapsedIconClass="ui-icon-folder-collapsed" ExpandedIconClass="ui-icon-folder-open" ItemIconClass="ui-icon-document"

3. Your <cc1:C1TreeViewNode> tags should resemble the following sample.

   Sample	Copy Code
   <cc1:C1TreeViewNode Text="Folder 1" CollapsedIconClass="ui-icon-folder-collapsed" ExpandedIconClass="ui-icon-folder-open" ItemIconClass="ui-icon-document">

4. Locate the <cc1:C1TreeViewNode> tags for "Folder 1.1" and insert the following markup.

   Markup	Copy Code
   CollapsedIconClass="ui-icon-folder-collapsed" ExpandedIconClass="ui-icon-folder-open" ItemIconClass="ui-icon-document"

5. Your <cc1:C1TreeViewNode> tags should resemble the following.

   Sample	Copy Code
   <cc1:C1TreeViewNode Text="Folder 1.1" CollapsedIconClass="ui-icon-folder-collapsed" ExpandedIconClass="ui-icon-folder-open" ItemIconClass="ui-icon-document">

          
6. Locate the <cc1:C1TreeViewNode> tags for "Folder 1.1.1" and add ItemIconClass="ui-icon-document" to the tags. Your <cc1:C1TreeViewNode> tags should resemble the following sample.

   Sample	Copy Code
   <cc1:C1TreeViewNode Text="Folder 1.1.1" ItemIconClass="ui-icon-document">

7. Press F5 to run your program. Your C1TreeView control should resemble the following image.