Binding Tree view In Asp.net MVC

In this article we will see how to bind the tree view in asp.net MVC using Jquery and Bootstrap.

Before starting the implementation, make ensure to get the below prerequisites

1.  Jquery  CDN  :  <script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
2.  Bootstrap  CDN:   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7    /css/bootstrap.min.css" rel="stylesheet" />
3.  CSS for tree view : ( You can download from below link ). 
4.  Image: glyphicons-halflings.png (This should get automatically render when referring the bootstrap.css, incase not rendering copy the img file to the solution).

In this article, I’m considering a scenario as, need to display the Portfolio Management Hierarchy, below is how  hierarchy is formatted.    

1.       Portfolio Name

1.1    Program Name

1.1.1          Project Name

1.1.1.1    Project Leader

1.1.1.1.1           Team Members

Here Top level node is portfolio. Portfolio may contain multiple programs and each program may have multiple Projects. Similarly, each project may have multiple project managers and so on..   this hierarchy drill down to till  team members.


Step 1: Create a new MVC project.

Step 2: Create a folder “shared” under folder “view” and add the master layout.

Step3:  Create a controller “OrganizationHierarchyController.cs” and add a view corresponding to that controller.  

Add below lines of  code to the newly created view.

CSS:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Scripts/CustomContent/CSS/Bootstaptreetable.css" rel="stylesheet" />

JavaScript : 
 
<script type="text/javascript">
    $(document).ready(function () {
      
        var selectedparentnode = null;

        $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Expand this branch');
        $('.tree li ul >li').hide();

       
        $('.tree li.parent_li > span').on('click', function (e) {
            var children = $(this).parent('li.parent_li').find(' > ul > li');
            if (children.is(":visible")) {
                children.hide('fast');
                $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
            } else {
                children.show('fast');
                $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
            }
            e.stopPropagation();
        });
    });

</script>

HTML Code:

<h2> Binding tree structure Hirearchy </h2>
<div class="col-lg-6">
    <div class="tree well">
        <ul>
            <li>
                <span><i class="icon-folder-open"></i>  Portfolio : Heavy machineries and Medical Equipment</span>
                <ul>
                    <li>
                        <span><i class="icon-minus-sign"></i> Program: Heavy machineries </span>
                        <ul>
                            <li>
                                <span><i class="icon-minus-sign"></i> Project : General Motor</span>

                                <ul>
                                    <li>
                                        <span><i class="icon-minus-sign"></i> ProjectLeader : John</span>

                                        <ul>
                                            <li>
                                                <span><i class="icon-leaf"></i> Team Members : 50</span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span><i class="icon-minus-sign"></i> Program: Medical Equipment </span>
                        <ul>
                            <li>
                                <span><i class="icon-minus-sign"></i> Project : GE HealthCare</span>

                                <ul>
                                    <li>
                                        <span><i class="icon-minus-sign"></i> ProjectLeader : Charles</span>

                                        <ul>
                                            <li>
                                                <span><i class="icon-leaf"></i> Team Members : 50</span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li>
                                <span><i class="icon-minus-sign"></i> Project : GE Life sciences </span>

                                <ul>
                                    <li>
                                        <span><i class="icon-minus-sign"></i> ProjectLeader : Mike</span>

                                        <ul>
                                            <li>
                                                <span><i class="icon-leaf"></i> Team Members : 30</span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>

                </ul>
            </li>

        </ul>
    </div>
</div>

<div class="col-md-6">
    <div>

    </div>
</div>

Binding tree view through programmatically 

https://dotnetkudos.blogspot.in/2017/02/binding-tree-view-in-aspnet-mvc.html