Search jQuery

jQuery Forum

Keeping epanded Treemenu open

in Getting Started • 8 years ago

Hi, I think this question has been asked before but I can't work out from other answers how to make mine work from it. I know next to nothing about Jquery but have the below script on an ASP.NET MVC 5 _Layout page

<script>
$(document).ready(function () {
$(".treeview li>ul").css('display', 'none'); // Hide all 2-level ul
$(".collapsible").click(function (e) {
e.preventDefault();
$(this).toggleClass("collapse expand");
$(this).closest('li').children('ul').slideToggle();
});
});
</script>

This works with a Html.RenderAction on the _Layout page that gets the data from a Sql database to populate the treemenu,

All works ok, but when I click a link on the tree menu to render a new body content page the tree menu collapses. Is there an easy way to add something that will maintain the tree menu state?

Please feel free to dumb down the response as this area really isn't my strong point!

Thanks

Replies(14)

jakecigar

Re: Keeping epanded Treemenu open

8 years ago

You need to be able to know which branches are supposed to be open. Without seeing the links, I don’t know what logic to use. Maybe loop through the links looking for the one that matches the URL you are on.

If you share a DEMO of your site, I can help you write the couple of lines of code to do it.

JΛ̊KE

rob lewis

Re: Keeping epanded Treemenu open

8 years ago

Hi JΛ̊KE,

Thank you for the reply.

It's based on this:

http://dotnetawesome.blogspot.co.uk/2014/06/how-to-create-treeview-with-database-data-mvc4-aspnet.html

However I have moved the style to a .css sheet and the scrip is in a js script I call from the asp.net mvc _Layout page.

I was hoping to have multiple tree menu's going down the side and for the script to work for them all which it does, but also remember the states when loading a page

jakecigar

Re: Keeping epanded Treemenu open

8 years ago

That isn’t a demo that I can update. And the linked pages don’t have the treemenu,

var selected = $(".treeview a").filter(function(){ return location.href == this.href })

should match the current page, and you should be able to open the menu.

JΛ̊KE

rob lewis

Re: Keeping epanded Treemenu open

8 years ago

in ~Scripts/Treeview.js

$(document).ready(function () {
$(".treeview li>ul").css('display', 'none'); // Hide all 2-level ul
$(".Treeviewcollapsible").click(function (e) {
e.preventDefault();
$(this).toggleClass("Treeviewcollapse Treeviewexpand");
$(this).closest('li').children('ul').slideToggle();
});
});

In ~/App_Code/TreeviewHelper.cshtml

@helper GetTreeView(List<OrwellFrontEnd.Models.SiteMenu> siteMenu, int parentID)
{
foreach (var i in siteMenu.Where(a => a.ParentMenuID.Equals(parentID)))
{
<li>
@{var submenu = siteMenu.Where(a => a.ParentMenuID.Equals(i.MenuID)).Count();}
@if (submenu > 0)
{
<span class="Treeviewcollapse Treeviewcollapsible"> </span>
}
else
{
<span style="width:15px; display:inline-block"> </span>
}
<span>
<a href="@i.NavURL">@i.MenuName</a>
</span>
@if (submenu > 0)
{
<ul>
@TreeviewHelper.GetTreeView(siteMenu, i.MenuID)
@* Recursive Call for Populate Sub items here*@
</ul>
}
</li>
}
}

In ~/Views/Shared/_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
@Html.Action("_MySite", "Treeview")
<div class="container body-content">
Text from the layout page
@RenderBody()
This is some body content
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/Treeview.js"></script>
</body>
</html>

In ~/Controllsers/TreeviewControllers.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using OrwellFrontEnd.Models;
using System.ComponentModel.DataAnnotations;
namespace OrwellFrontEnd.Controllers
{
public class TreeviewController : Controller
{
public ActionResult _MySite()
{
List<SiteMenu> MenuList = new List<SiteMenu>();
using (EIPInternalEntities ctx = new EIPInternalEntities())
{
MenuList = ctx.Database.SqlQuery<SiteMenu>("EXEC uspReturnvwSiteMenu").ToList();
}
return PartialView(MenuList);
}
//GET: Treeview Index
public ActionResult Index()
{
IEnumerable<SelectListItem> Department = new List<SelectListItem>();
using (EIPInternalEntities ctx = new EIPInternalEntities())
{
ViewBag.Department = new SelectList(ctx.Database.SqlQuery<string>("EXEC uspGetDepartments").ToList());
}
return View();
}
//GET: Treeview About
public ActionResult About()
{
return View();
}
}
}

Does that help? :)

jakecigar

Re: Keeping epanded Treemenu open

8 years ago

Your server coding with the @s doesn’t make it easy! I would try…

$(document).ready(function () {
$(".treeview li>ul").css('display', 'none'); // Hide all 2-level ul
var selected = $(".treeview a").filter(function(){ return location.href == this.href });

console.log("selected", selected) // did we get the right one?

selected.parents("ul").show()
$(".Treeviewcollapsible").click(function (e) {
e.preventDefault();
$(this).toggleClass("Treeviewcollapse Treeviewexpand");
$(this).closest('li').children('ul').slideToggle();
});
});