CODEWITHSUNDEEP
c#jqueryhtmltwitter-bootstrapasp.net-mvc-4
toing_toing
toing_toing

Reputation: 2442

Treeview (nested dropdown) menu is not expanded on page reload bootstrap mvc4

I'm trying to implement a treeview menu in my application and everything works fine except that once I click on an item in the expanded list, the reloaded page loads with the contracted list, which makes navigation difficult for users. What could be causing this? Is it the Html.Actionlink in my code? My code from the menu is below. Please explain what can be done here. Thanks in advance.

<li class="treeview">
                        <a href="#">
                             <span>Leave Management</span> <i class="fa fa-angle-left pull-right"></i>
                        </a>
                        <ul class="treeview-menu">
                            <li class="@Html.IsActive("Leave", "Index")">@Html.ActionLink("My leave Information", "Index", "Leave")</li>
                            <li class="@Html.IsActive("Leave", "NewLeaveRequest")">@Html.ActionLink("New Leave Request", "NewLeaveRequest", "Leave")</li>
                            <li class="@Html.IsActive("Leave", "Approve")">@Html.ActionLink("Approvals", "Approve", "Leave")</li>
                            <li class="@Html.IsActive("Leave", "EmpLeaveInfo")">@Html.ActionLink("Employee Leave Information", "EmpLeaveInfo", "Leave")</li>

                        </ul>
                    </li>

Upvotes: 0

Views: 1570

Answers (2)

Sanjay kumar
Sanjay kumar

Reputation: 1673

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <nav>
                <ul class="nav">
                    <li><a href="#">Home</a></li>
                    <li>
                        <a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false">Leave Management</a>
                        <ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
                            <li>@Html.ActionLink("My leave Information", "Index", "Leave")</li>
                            <li>@Html.ActionLink("New Leave Request", "NewLeaveRequest", "Leave")</li>
                            <li>@Html.ActionLink("Approvals", "Approve", "Leave")</li>
                            <li>@Html.ActionLink("Employee Leave Information", "EmpLeaveInfo", "Leave")</li>
                        </ul>
                    </li>

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

enter image description here

enter image description here

http://www.bootply.com/uBoT3zP1P2

Upvotes: 1

Sanjay kumar
Sanjay kumar

Reputation: 1673

Here is a working example with data source BootStrap TreeView

http://bootply.com/60761

A simple and elegant solution to displaying hierarchical tree structures (i.e. a Tree View)

https://github.com/jonmiles/bootstrap-treeview

Upvotes: 0

Related Questions