ComponentOne Extender Controls for ASP.NET Web Forms
Wijmo Control Toolkit Extender Controls / C1TreeExtender / Setting the Expand on Hover Option
In This Topic
    Setting the Expand on Hover Option
    In This Topic

    C1TreeExtender supports expanding or collapsing a node when the mouse hovers the node and then leaves the node.

    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 class="folder"><a><span>Folder 1</span></a>

          <ul>

          <li class="folder"><a><span>Folder 1.1</span></a>

          <ul>

          <li class="file"><a><span>File 1.1</span></a></li>

          <li class="file"><a><span>File 1.2</span></a></li>

          <li class="file"><a><span>File 1.3</span></a></li>

          <li class="file"><a><span>File 1.4</span></a></li>

          <li class="file"><a><span>File 1.5</span></a></li>

                            </ul>

                        </li>

          <li class="file"><a><span>File 1.2</span></a></li>

          <li class="file"><a><span>File 1.3</span></a></li>

          <li class="file"><a><span>File 1.4</span></a></li>

          <li class="file"><a><span>File 1.5</span></a></li>

                    </ul>

                </li>

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

          <ul>

          <li class="file"><a><span>File 2.1</span></a></li>

          <li class="file"><a><span>File 2.2</span></a></li>

          <li class="file"><a><span>File 2.3</span></a></li>

          <li class="file"><a><span>File 2.4</span></a></li>

          <li class="file"><a><span>File 2.5</span></a></li>

                    </ul>

                </li>

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

                    <ul>

          <li class="file"><a><span>File 3.1</span></a></li>

          <li class="file"><a><span>File 3.2</span></a></li>

          <li class="file"><a><span>File 3.3</span></a></li>

          <li class="file"><a><span>File 3.4</span></a></li>

          <li class="file"><a><span>File 3.5</span></a></li>

                    </ul>

                </li>

            </ul>

    1. Use the Panel control's smart tag to open the Extender Wizard by clicking Add Extender.
    2. Select the C1TreeExtender from the list and click OK to add it to the application.
    3. Select View | Properties from the Visual Studio menu and use the drop-down list at the top of the Properties window to select Panel1_C1TreeExtender.
    4. Locate the C1TreeExtender.ExpandCollapseHoverUsed property and set it to true.
    5. Press F5 to run your application. Note that the nodes will open when you hover over them with your mouse pointer and close when your mouse pointer leaves the node.