Sign In | Join

Home / ASP.NET Wiki / Javascript / Javascript libraries / jQuery / Dynamic TreeView With Jquery

Dynamic TreeView With Jquery

 Rate It (2)

I've Create a Page with a Left Navigator Menu and I decided to create a simple list and add the functionallity with Jquery.

this is the TreeView:

<ul id="red" class="treeview">

<li><span class="Node">Config</span>

<ul class="node">

<li><span>Server</span>

<ul class="page">

<li><%=Html.ActionLink("Server Profile", "ServProfile", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Scheduler", "list_tasks", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Event Log", "viewEvents", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Email", "EmailOut", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Email Notification", "Notify", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Order Delivery Log", "OrderDeliveryLog", "Config", new { area = "Management" }, null)%></li>

</ul>

</li>

<li><span>Dealer</span>

<ul class="page">

<li><%=Html.ActionLink("Dealer Profile", "DealerProfile", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("SWIDOrders", "SWIDOrders", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Customer Management", "Manage", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Template Customization", "CustomTemplate", "Config", new { area = "Management", @mode = "D" }, null)%></li>

<li><%=Html.ActionLink("SnapTracker", "SnapTracker", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Hedberg", "HedbergDatabase", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("CyberSource", "DealerCyber", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Maintenance", "Maintenance", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Portal", "Portal", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("P3P", "P3P", "Config", new { area = "Management" }, null)%></li>

</ul>

</li>

<li><span>Customer</span>

<ul class="page">

<li><%=Html.ActionLink("Customer Profile", "CustProfile", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Shopper Basquets", "Basket", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Hedberg Quote Approval", "HedbergQuoteApproval", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Shopper Registration", "Registration", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Order Confirmation Emails", "OrderConfirmEmail", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Home Office Program", "HOP", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Dispatcher", "Dispatcher", "Config", new { area = "Management", config = 1 }, null)%></li>

<li><%=Html.ActionLink("Site Approval", "Approval", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("MultiDealer", "MultiDealer", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Customer Number Mapping", "Mapping", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Template Customization", "CustomTemplate2", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Site Registration", "SiteRegistration", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("P3P", "P3P2", "Config", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Asset Management", "AssetManagement", "Config", new { area = "Management" }, null)%></li>

</ul>

</li>

</ul>

</li>

<br />

<li><span class="Node">Membership</span>

<ul class="node">

<li><span>Profile Maintenance</span>

<ul class="page">

<li><%=Html.ActionLink("Define Attributes", "ParamsShopper", "Membership", new { area = "Management" }, null)%></li>

</ul>

</li>

<li><span>Shoppers</span>

<ul class="page">

<li><%=Html.ActionLink("Profile Data", "DataShopper", "Membership", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Management", "UserManagement", "Membership", new { area = "Management" }, null)%></li>

</ul>

</li>

<li><span>Groups</span>

<ul class="page">

<li><%=Html.ActionLink("System Groups", "GroupsSystem", "Membership", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Custom Groups", "GroupsCustom", "Membership", new { area = "Management" }, null)%></li>

</ul>

</li>

<li><span>Geo Location</span>

<ul class="page">

<li><%=Html.ActionLink("Bulk Upload", "GeoLocationUpload", "Membership", new { area = "Management" }, null)%></li>

</ul>

</li>

</ul>

</li>

<br />

<li><span class="Node">Shopping</span>

<ul class="node">

<li><span>Basket Display</span>

<ul class="page">

<li><%=Html.ActionLink("Product View", "BasketSetup", "Shopping", new { area = "Management", catalogType = "p" }, null)%></li>

<li><%=Html.ActionLink("Service View", "BasketSetup", "Shopping", new { area = "Management", catalogType = "s" }, null)%></li>

</ul>

</li>

<li><span>Your Account</span>

<ul class="page">

<li><%=Html.ActionLink("Configurator", "YourAccountConfigurator", "Shopping", new { area = "Management" }, null)%></li>

</ul>

</li>

<li><span>Catalog Admin</span>

<ul class="page">

<li><%=Html.ActionLink("Catalogs", "Catalog", "Shopping", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Catalog Management", "CatalogManager_default", "Shopping", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Manufacturer Catalog Pricing", "CatalogManager_RepriceCatalog", "Shopping", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Catalog Impact Assessment", "CatalogImpactAssessment", "Shopping", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Stock Catalogs", "StockCatalog", "Shopping", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Load/Backup Catalogs", "CatalogLoad", "Shopping", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Free-Form Catalog", "FreeFormCatalog", "Shopping", new { area = "Management" }, null)%></li>

</ul>

</li>

<li><span>preXML Files</span>

<ul class="page">

<li><%=Html.ActionLink("Configuration", "PreXMLConf", "Shopping", new { area = "Management" }, null)%></li>

</ul>

</li>

</ul>

</li>

<br />

<li><span class="Node">Service Builder</span>

<ul class="node">

<li><span>Service Builder</span>

<ul class="page">

<li><%=Html.ActionLink("Forms", "SBFormsFrame", "Servicebuilder", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Fields", "SBFrame", "Servicebuilder", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Options", "SBOptionGroups", "Servicebuilder", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Extract", "SBFormExtract", "Servicebuilder", new { area = "Management" }, null)%></li>

</ul>

</li>

</ul>

</li>

<br />

<li><span class="Node">CheckOut</span>

<ul class="node">

<li><span>Checkout Parameters</span>

<ul class="page">

<li><%=Html.ActionLink("Credit Card Processing", "CCProcess", "CheckOut", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Payment Methods", "PaymentMethodParams", "CheckOut", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Billing and Shipping", "ParamsBS", "CheckOut", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Address Lists", "AddressLists", "CheckOut", new { area = "Management" }, null)%></li>

</ul>

</li>

<li><span>Custom Charges</span>

<ul class="page">

<li><%=Html.ActionLink("Charges By Weight", "CustomChargeByWeight", "CheckOut", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Charges By Unit", "CustomChargeByUnit", "CheckOut", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Charges By Amount", "CustomChargeByAmount", "CheckOut", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Group Custom Charges", "GroupCharges", "CheckOut", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Tax Charges", "CustomChargeStateTax", "CheckOut", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Custom Tax Codes", "CustomChargeCustomTax", "CheckOut", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Surcharge", "Surcharge", "CheckOut", new { area = "Management" }, null)%></li>

</ul>

</li>

</ul>

</li>

<br />

<li><span class="Node">Dispatcher</span>

<ul class="node">

<li><span>Site Setup</span>

<ul class="page">

<li><%=Html.ActionLink("Configuration", "Dispatcher", "Config", new { area = "Management", config = 0 }, null)%></li>

<li><%=Html.ActionLink("Dispatcher Criteria", "DispatcherCriteria", "Dispatcher", new { area = "Management" }, null)%></li>

</ul>

</li>

<li><span>Dispatchers</span>

<ul class="page">

<li><%=Html.ActionLink("Dispatcher Management", "DispatcherManager", "Dispatcher", new { area = "Management" }, null)%></li>

</ul>

</li>

<li><span>Groups</span>

<ul class="page">

<li><%=Html.ActionLink("Dispatcher Groups", "DispatcherValues", "Dispatcher", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Dispatcher Assignment", "DispatcherAssignment", "Dispatcher", new { area = "Management" }, null)%></li>

</ul>

</li>

</ul>

</li>

<br />

<li><span class="Node">FeedBack</span>

<ul class="node">

<li><span>Logs</span>

<ul class="page">

<li><%=Html.ActionLink("Feedback", "Feedback", "Feedback", new { area = "Management" }, null)%></li>

</ul>

</li>

</ul>

</li>

<br />

<li><span class="Node">Help Files</span>

<ul class="node">

<li><span>Setup</span>

<ul class="page">

<li><%=Html.ActionLink("Create Menu", "CreateMenu", "HelpFiles", new { area = "Management" }, null)%></li>

</ul>

</li>

<li><span>Content Publishing</span>

<ul class="page">

<li><%=Html.ActionLink("File Upload", "FileUpload", "HelpFiles", new { area = "Management" }, null)%></li>

</ul>

</li>

</ul>

</li>

<br />

<li><span class="Node">Resource Area</span>

<ul class="node">

<li><span>Resource Area</span>

<ul class="page">

<li><%=Html.ActionLink("Security", "Security", "ResourceArea", new { area = "Management" }, null)%></li>

</ul>

</li>

</ul>

</li>

<br />

<li><span class="Node">Resource Library</span>

<ul class="node">

<li><span>General</span>

<ul class="page">

<li><%=Html.ActionLink("Customer Account", "CustomerAccount", "Resourcelibrary", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Locations", "Locations", "Resourcelibrary", new { area = "Management" }, null)%></li>

</ul>

</li>

<li><span>Yellow Pages</span>

<ul class="page">

<li><%=Html.ActionLink("Contacts", "ManageContacts", "Resourcelibrary", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Change Requests", "ChangeRequests", "Resourcelibrary", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Contact Types", "ContactTypes", "Resourcelibrary", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Custom Fields", "ContactCustomFields", "Resourcelibrary", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Contact Assignment", "ContactAssignment", "Resourcelibrary", new { area = "Management" }, null)%></li>

</ul>

</li>

<li><span>Project Summary</span>

<ul class="page">

<li><%=Html.ActionLink("Recipients", "ProjSummaryRecipients", "Resourcelibrary", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Custom Fields", "PSCustomFields", "Resourcelibrary", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Summary Comments", "ProjSummaryComments", "Resourcelibrary", new { area = "Management" }, null)%></li>

</ul>

</li>

<li><span>Capabilities Matrix</span>

<ul class="page">

<li><%=Html.ActionLink("Manufacturing Regions", "MfgRegions", "Resourcelibrary", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Matrix Data", "CapMatrixData", "Resourcelibrary", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Define Market Risk", "MarketRisk", "Resourcelibrary", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Matrix Comments", "CapMatrixComments", "Resourcelibrary", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Product Availability", "ProductAvailability", "Resourcelibrary", new { area = "Management" }, null)%></li>

</ul>

</li>

<li><span>Standards Catalog</span>

<ul class="page">

<li><%=Html.ActionLink("Create Catalog", "CreateCatalogs", "Resourcelibrary", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Load Catalog Files", "LoadCatalogs", "Resourcelibrary", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Catalog Assignment", "CatalogAssignment", "Resourcelibrary", new { area = "Management" }, null)%></li>

</ul>

</li>

</ul>

</li>

<br />

<li><span class="Node">Reports</span>

<ul class="node">

<li><span>Setup</span>

<ul class="page">

<li><%=Html.ActionLink("Create Menu", "CreateMenu", "Reports", new { area = "Management" }, null)%></li>

<li><%=Html.ActionLink("Menu Assignment", "MenuAssign", "Reports", new { area = "Management" }, null)%></li>

</ul>

</li>

<li><span>Content Publishing</span>

<ul class="page">

<li><%=Html.ActionLink("File Upload", "FileUpload", "Reports", new { area = "Management" }, null)%></li>

</ul>

</li>

</ul>

</li>

</ul>

 

And Then I create the Jquery Logic:

<script type="text/javascript" language="javascript">

$(function() {

      $(".treeview ul").css("display", "none");

      var topLeftNav = $("#leftNavBox").offset().top;

      var bottomLeftNav = $(".endOfPage").offset().top - 30;

      $("#leftNavBox").css("height", bottomLeftNav - topLeftNav);

      $(".Node").click(function() {

      if ($(this).siblings().find("ul").css("display") != "none") {

      $(".Node").parent().find("ul").css("display", "none");

      $(this).parent().find("ul").css("display", "none");

      $(".Node").css("font-style", "normal");

      $(this).css("text-decoration", "none");      $("html").scrollTop(0);

  }

else {

$(".Node").parent().find("ul").css("display", "none");

$(this).parent().find("ul").css("display", "block");

$(".Node").css("font-style", "normal");

$(this).css("font-style", "italic");

$(this).css("text-decoration", "underline");

}

});

});

 

</script>

Hope that help everyone!

 

Revision number 2, Friday, June 24, 2011 9:58:04 AM by codenickel

Comments

Fri, Jun 24, 2011 1:56 PM by evanorue

I create this post because I think that can be very useful if you want to create a simple list and at the view look like a treeView and with the great Jquery can add functionallity!
Tue, Jun 28, 2011 1:00 PM by arckal

Hi Evan, thanks for nice post, I was trying to see if I could use your porvided Treeview at http://wiki.asp.net/page.aspx/1694/dynamic-treeview-with-jquery/ I see there are few glitches in code, would be nice if you could provide asistance to fix those! 1) I do not see any reference of "leftNavBox" which is used in jQuery 2) also there CSS classes been used, could you also post the CSS file or list, so that I could see the effect and customize them accordingly. I hope to here from you soon! Thanks! .

Shortcuts

Table of Contents

Top Wiki Contributors

(last 30 days)

  1. abiruban (1)