MVC5 Classic
Use Auto Collapse

wijtree allows you to use an auto collapse option, which collapses an exposed node when another node is selected. This topic will take you through setting the auto collapse option. See the Auto Collapse > Tree sample of the MVC Control Explorer live demos at http://demo.componentone.com/ASPNET/MVCExplorer/tree/AutoCollapse.

  1. Create an C1 ASP.NET MVC 5 Web Application.
  2. In the Solution Explorer, expand the Views | Shared folder and double-click _Layout.cshtml to open the file.
  3. Add the following markup within the <body> tags of the page.
    <ul id="tree">
                <li><a>Folder 1</a>
                    <ul>
                        <li><a>Folder 1.1</a></li>
                        <li><a>Folder 1.2</a></li>
                        <li><a>Folder 1.3</a>
                            <ul>
                                <li><a><span>Folder 1.3.1</span></a></li>
                                <li><a><span>Folder 1.3.2</span></a></li>
                                <li><a><span>Folder 1.3.3</span></a></li>
                                <li><a><span>Folder 1.3.4</span></a></li>
                                <li><a><span>Folder 1.3.5</span></a></li>
                            </ul>
                        </li>
                        <li><a>Folder 1.4</a></li>
                        <li><a>Folder 1.5</a></li>
                    </ul>
                </li>
                <li><a href="#"><span>Folder 2</span></a>
                    <ul>
                        <li><a><span>Folder 2.1</span></a></li>
                        <li><a><span>Folder 2.2</span></a></li>
                        <li><a><span>Folder 2.3</span></a></li>
                        <li><a><span>Folder 2.4</span></a></li>
                        <li><a><span>Folder 2.5</span></a></li>
                    </ul>
                </li>
                <li><a href="#"><span>Folder 3</span></a>
                    <ul>
                        <li><a><span>Folder 3.1</span></a></li>
                        <li><a><span>Folder 3.2</span></a></li>
                        <li><a><span>Folder 3.3</span></a></li>
                        <li><a><span>Folder 3.4</span></a></li>
                        <li><a><span>Folder 3.5</span></a></li>
                    </ul>
                </li>
            </ul>
    
  4. Use the following script to initialize the widget:
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            var tv = $("#tree").wijtree({
                autoCollapse: true
            });
        });      
        </script>
    
  5. Note that the script now contains the autocollapse option set to "true".
  6. Run your project. Click on one of the nodes to open it. When you click on another node, it will cause another open node to collapse.

 

 


Copyright (c) GrapeCity, inc. All rights reserved.

Product Support Forum |  Documentation Feedback