How to display tree view in MVC using bootstrap

Question

_{Monday, January 25, 2016 1:13 PM}

Can some one help me how to Display Tree View using bootstrap. I am using Jquery and bootstrap. But the parents are not able to click.

Can you please briefly explain along with the references also.

Regards,

Gousiya Sultana

All replies (6)

_{Tuesday, January 26, 2016 8:25 AM ✅Answered}

Hi openskygousiya,

Take a look at the following sample.

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <style type="text/css">
        .tree, .tree ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

            .tree ul {
                margin-left: 1em;
                ;
            }

                .tree ul ul {
                    margin-left: .5em;
                }

                .tree ul:before {
                    content: "";
                    display: block;
                    width: 0;
                    ;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    border-left: 1px solid;
                }

            .tree li {
                margin: 0;
                padding: 0 1em;
                line-height: 2em;
                color: #369;
                font-weight: 700;
                ;
            }

            .tree ul li:before {
                content: "";
                display: block;
                width: 10px;
                height: 0;
                border-top: 1px solid;
                margin-top: -1px;
                ;
                top: 1em;
                left: 0;
            }

            .tree ul li:last-child:before {
                background: #fff;
                height: auto;
                top: 1em;
                bottom: 0;
            }

        .indicator {
            margin-right: 5px;
        }

        .tree li a {
            text-decoration: none;
            color: #369;
        }

        .tree li button, .tree li button:active, .tree li button:focus {
            text-decoration: none;
            color: #369;
            border: none;
            background: transparent;
            margin: 0px 0px 0px 0px;
            padding: 0px 0px 0px 0px;
            outline: 0;
        }
    </style>
</head>
<body>

    <ul id="tree1">
        <li>
            <a href="#">TECH</a>

            <ul>
                <li>Company Maintenance</li>
                <li>
                    Employees
                    <ul>
                        <li>
                            Reports
                            <ul>
                                <li>Report1</li>
                                <li>Report2</li>
                                <li>Report3</li>
                            </ul>
                        </li>
                        <li>Employee Maint.</li>
                    </ul>
                </li>
                <li>Human Resources</li>
            </ul>
        </li>
        <li>
            XRP
            <ul>
                <li>Company Maintenance</li>
                <li>
                    Employees
                    <ul>
                        <li>
                            Reports
                            <ul>
                                <li>Report1</li>
                                <li>Report2</li>
                                <li>Report3</li>
                            </ul>
                        </li>
                        <li>Employee Maint.</li>
                    </ul>
                </li>
                <li>Human Resources</li>
            </ul>
        </li>
    </ul>

</body>
</html>
<script type="text/javascript">
    $.fn.extend({
        treed: function (o) {

            var openedClass = 'glyphicon-minus-sign';
            var closedClass = 'glyphicon-plus-sign';

            if (typeof o != 'undefined') {
                if (typeof o.openedClass != 'undefined') {
                    openedClass = o.openedClass;
                }
                if (typeof o.closedClass != 'undefined') {
                    closedClass = o.closedClass;
                }
            };

            //initialize each of the top levels
            var tree = $(this);
            tree.addClass("tree");
            tree.find('li').has("ul").each(function () {
                var branch = $(this); //li with children ul
                branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>");
                branch.addClass('branch');
                branch.on('click', function (e) {
                    if (this == e.target) {
                        var icon = $(this).children('i:first');
                        icon.toggleClass(openedClass + " " + closedClass);
                        $(this).children().children().toggle();
                    }
                })
                branch.children().children().toggle();
            });
            //fire event from the dynamically added icon
            tree.find('.branch .indicator').each(function () {
                $(this).on('click', function () {
                    $(this).closest('li').click();
                });
            });
            //fire event to open branch if the li contains an anchor instead of text
            tree.find('.branch>a').each(function () {
                $(this).on('click', function (e) {
                    $(this).closest('li').click();
                    e.preventDefault();
                });
            });
            //fire event to open branch if the li contains a button instead of text
            tree.find('.branch>button').each(function () {
                $(this).on('click', function (e) {
                    $(this).closest('li').click();
                    e.preventDefault();
                });
            });
        }
    });

    //Initialization of treeviews

    $('#tree1').treed();

    $('#tree1 .branch').each(function () {

        var icon = $(this).children('i:first');
        icon.toggleClass('glyphicon-minus-sign glyphicon-plus-sign');
        $(this).children().children().toggle();

    });


</script>

Best Regards,

Chris Zhao

_{Wednesday, January 27, 2016 3:58 PM ✅Answered}

Hi Gousiya,

How to display content in right side. For ex If we click/ select on Company Maintenance, the data which is under Company Maintenance should be displayed on right side.

You could put the menu code in layout.cshtml so it will be the same for all pages.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/Content/Site.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <div id="header">
        <div class="title">header</div>
    </div>
    <div id="menu">
        @{ Html.RenderAction("Menu", "Nav"); }
    </div>
    <div id="content">
        @RenderBody()
    </div>
</body>
</html>

Left Menu

Controller

public PartialViewResult LeftMenu()
{        
    List<string> list = new List<string>();
    list.Add("IndexA");
    list.Add("IndexB");
    list.Add("IndexC");    

    return PartialView(list);
}

View

@model IEnumerable<string>

@foreach (var link in Model)
{
    string result = (string)link;
    
    @Html.RouteLink(result.Trim(), new
    {
        controller = "RightContent",
        action = "GetContent"
    })
}

Right Content

public ActionResult IndexA()
{
    return View();
}

public ActionResult IndexB()
{
    return View();
}

public ActionResult IndexC()
{
    return View();
}

Best Regards,

Chris Zhao

_{Monday, January 25, 2016 1:15 PM}

You should show the code yo uare trying to get working. You might only be a typo away from success.

_{Tuesday, January 26, 2016 6:24 AM}

Hi,

Thanks for giving reply.

Here is **HTML code: **

<ul>
<li>Company Maintenance</li>
<li>Employees
<ul>
<li>Reports
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
<li>Employee Maint.</li>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
<li>XRP
<ul>
<li>Company Maintenance</li>
<li>Employees
<ul>
<li>Reports
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
<li>Employee Maint.</li>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
</ul>
</div>

</div>

JS:

$('#tree2').treed({ openedClass: 'glyphicon-folder-open', closedClass: 'glyphicon-folder-close' });

</script>

by using this tree view is displaying.But tree view collapsing and expanding not working. When we click on Tech (Parent) its child's should be displayed. Simply open and close

How to achieve this.

Regards,

Gousiya

_{Tuesday, January 26, 2016 4:01 PM}

Hi Chris,

Thank you for giving reply. Now it's working fine.

How to display content in right side. For ex If we click/ select on Company Maintenance, the data which is under Company Maintenance should be displayed on right side.

similarly when we click/ select on Report1, Report2, Report3 and Report4, the respective data should be displayed in the right side.

Can you please help me How to achieve this??

Regards,

Gousiya Sultana

_{Tuesday, January 26, 2016 4:05 PM}

[email protected]

Thank you for giving reply. Now it's working fine.

You should post your supplementary questions as a new thread.

Last updated on 2016-01-25

Share via

How to display tree view in MVC using bootstrap

Question

All replies (6)

[email protected]

Additional resources