Navigation treeview or flyout menus?

This forum is where we'll mirror posts that are of value to the community so they may be more easily found.
User avatar
Jinx
Lieutenant (LT)
Lieutenant (LT)
Posts: 56
Joined: Thu Sep 28, 2006 8:09 pm
Location: Omaha, NE
Contact:

Is there a way?

Post by Jinx » Mon Mar 17, 2008 12:23 pm

Is there a way to get a no script into bumbles code that will trigger something like the simplecategorylist.ascx if Javascript is turned off? Or how are other people handling this if they are using the ajax navigation?

Bumbles
Ensign (ENS)
Ensign (ENS)
Posts: 14
Joined: Mon Dec 10, 2007 1:43 am

Post by Bumbles » Mon Mar 17, 2008 2:30 pm

When I was first playing around with the ComponentArt Treeview control I had the same concerns, as to me SEO is paramount. I found this statement on the ComponentArt website:

ComponentArt Web.UI navigation controls (Menu, TreeView, NavBar, TabStrip and SiteMap) provide meaningful content to search engine crawlers by generating crawler friendly representation of the navigation structure. Any web site that uses ComponentArt navigation controls will be properly indexed by all of the supported search engines.

I was able to verify that this was the case by using a googlebot emulator, to see what html the googlebot would see. I guess that they are looking at User-Agent to decide whether to return the pretty version or the "searchable" version.

User avatar
Jinx
Lieutenant (LT)
Lieutenant (LT)
Posts: 56
Joined: Thu Sep 28, 2006 8:09 pm
Location: Omaha, NE
Contact:

emulator

Post by Jinx » Tue Mar 18, 2008 6:11 am

What emulator are you using? I want to try and test it myself since I am using a modified treeview.

User avatar
Jinx
Lieutenant (LT)
Lieutenant (LT)
Posts: 56
Joined: Thu Sep 28, 2006 8:09 pm
Location: Omaha, NE
Contact:

Emulator

Post by Jinx » Tue Mar 18, 2008 6:25 am

If your emulator is a paid product could you check out http://www.etillastuffedanimals.com. It is the modified version you helped me work on. Since the initial link opens up using ajax to display the sub categories I am worried that Google won't be able to open it up to spider the product categories.

Bumbles
Ensign (ENS)
Ensign (ENS)
Posts: 14
Joined: Mon Dec 10, 2007 1:43 am

Post by Bumbles » Tue Mar 18, 2008 1:31 pm

I use a software application, but there are a number of online ones. I tried your site on this one http://www.submitexpress.com/analyzer/. If you select googlebot from the combo, then it successfully reports all the links on your tree.

If you want to see what actual html returned from your site when the treeview component identifies the request as coming from a search engine spider, let me know and I'll send it to you.

User avatar
Jinx
Lieutenant (LT)
Lieutenant (LT)
Posts: 56
Joined: Thu Sep 28, 2006 8:09 pm
Location: Omaha, NE
Contact:

I would love to see the html

Post by Jinx » Wed Mar 19, 2008 6:32 am

I would love to see the actual html. I have to double check to justify everything for our SEO guy.

Bumbles
Ensign (ENS)
Ensign (ENS)
Posts: 14
Joined: Mon Dec 10, 2007 1:43 am

Post by Bumbles » Wed Mar 19, 2008 7:24 pm

Have just sent you an email with the html attached.

User avatar
mfreeze
Commodore (COMO)
Commodore (COMO)
Posts: 421
Joined: Mon Jan 24, 2005 2:07 pm
Location: Washington, NJ
Contact:

Re: Navigation treeview or flyout menus?

Post by mfreeze » Mon Apr 07, 2008 5:02 pm

I tried to insert the TreeView1.NodeWrap = true; into the code and got the following message:

[[ConLib:/Custom/CategoryTreeView]] d:\ac7_xxxxx\ConLib\Custom\CategoryTreeView.ascx(26): error CS0117: 'ComponentArt.Web.UI.TreeView' does not contain a definition for 'NodeWrap'

That might explain why I haven't been able to get the category names to wrap whatever I do.
Mary E Freeze

Freeze Frame Graphics
Web Hosting and Design, ASP and CFMX Development

http://www.ffgraphics.com

User avatar
jmestep
AbleCommerce Angel
Posts: 8164
Joined: Sun Feb 29, 2004 8:04 pm
Location: Dayton, OH
Contact:

Re: Navigation treeview or flyout menus?

Post by jmestep » Mon Apr 07, 2008 5:18 pm

I could never get the nodewrap to work either. The use of the category tree is different in the admin and that is why it wraps there -see Admin/Catalog/CategoryTree.ascx-- it uses the asp:treeview and nodewrap works there.
I ended up making my left nav on the store side wide enough for the longest category name.
Mazhar, where are you?????????
Judy Estep
Web Developer
jestep@web2market.com
http://www.web2market.com
708-653-3100 x209
New search report plugin for business intelligence:
http://www.web2market.com/Search-Report ... -P154.aspx

User avatar
Jinx
Lieutenant (LT)
Lieutenant (LT)
Posts: 56
Joined: Thu Sep 28, 2006 8:09 pm
Location: Omaha, NE
Contact:

Re: Navigation treeview or flyout menus?

Post by Jinx » Tue Apr 08, 2008 9:25 am

You're right. I added the node wrap as based upon component arts instructions and did not get an error and thought everything was working right... but.... since I have added a really long category name and the horizontal scroll displays.. SORRY thought it was working.

Pat_king
Ensign (ENS)
Ensign (ENS)
Posts: 14
Joined: Thu Jan 03, 2008 9:40 pm

Re: Navigation treeview or flyout menus?

Post by Pat_king » Fri Apr 11, 2008 12:02 am

hi jinx,

I tried the navigation bar for the category navigation and fly out menu for the categories .i got the code that works fin e for navigation using the component art.


Regards ,
Pat

User avatar
Jinx
Lieutenant (LT)
Lieutenant (LT)
Posts: 56
Joined: Thu Sep 28, 2006 8:09 pm
Location: Omaha, NE
Contact:

Re: Navigation treeview or flyout menus?

Post by Jinx » Fri Apr 11, 2008 8:12 am

You got the navigation to wrap without scroll bars?

User avatar
mfreeze
Commodore (COMO)
Commodore (COMO)
Posts: 421
Joined: Mon Jan 24, 2005 2:07 pm
Location: Washington, NJ
Contact:

Re: Navigation treeview or flyout menus?

Post by mfreeze » Fri Apr 11, 2008 9:29 am

Can you post the code you used?

Thanks
Mary E Freeze

Freeze Frame Graphics
Web Hosting and Design, ASP and CFMX Development

http://www.ffgraphics.com

Pat_king
Ensign (ENS)
Ensign (ENS)
Posts: 14
Joined: Thu Jan 03, 2008 9:40 pm

Re: Navigation treeview or flyout menus?

Post by Pat_king » Mon Apr 14, 2008 12:14 am

Create /ConLib/Custom/CategoryNavigation.ascx with the following:

Code: Select all

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="CategoryNavigation.ascx.cs" Inherits="ConLib_Custom_CategoryNavigation" %>
<%@ Register Assembly="ComponentArt.Web.UI" Namespace="ComponentArt.Web.UI" TagPrefix="ComponentArt" %>

<asp:Panel ID="MainPanel" runat="server" CssClass="section">
    <asp:Panel ID="HeaderPanel" runat="server" CssClass="header">
	    <h2 class="header"><asp:Localize ID="HeaderTextLabel" runat="server" Text="Categories"></asp:Localize></h2>
    </asp:Panel>
	<asp:Panel ID="ContentPanel" runat="server" CssClass="content">
  <ComponentArt:NavBar id="serverNavBar" 
      CssClass="NavBar"
      DefaultItemLookID="TopItemLook"
      ImagesBaseUrl="App_Themes/AbleCommerce/images"
      runat="server" 
      >
    <ItemLooks>
      <ComponentArt:ItemLook LookID="TopItemLook" CssClass="TopItem" HoverCssClass="TopItemHover" LeftIconVisibility="Always" RightIconVisibility="Always" />
      <ComponentArt:ItemLook LookID="Level2ItemLook" LabelPaddingTop="10px" CssClass="Level2Item" HoverCssClass="Level2ItemHover" LeftIconVisibility="Always" RightIconVisibility="Always" />
    </ItemLooks>
      
  </ComponentArt:NavBar>
  </asp:Panel>
  </asp:Panel> 
Add this to the code file CategoryNavigation.ascx.cs

Code: Select all

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using CommerceBuilder.Catalog;


public partial class ConLib_Custom_CategoryNavigation : System.Web.UI.UserControl
{
    
    private void Page_Load(object sender, System.EventArgs e)
    {
        BuildServerNavBar();
    }

    private void BuildServerNavBar()
    {
 
        /* Applying Styles to the Navigation Bar */
            
        serverNavBar.ScrollUpImageUrl = "scrollup.gif";
        serverNavBar.ScrollDownImageUrl = "scrolldown.gif";
        serverNavBar.ScrollUpHoverImageUrl = "scrollup.gif";
        serverNavBar.ScrollDownHoverImageUrl = "scrolldown.gif";
        serverNavBar.ScrollUpActiveImageUrl = "scrollup.gif";
        serverNavBar.ScrollDownActiveImageUrl = "scrolldown.gif";
        serverNavBar.ScrollUpImageWidth = 16;
        serverNavBar.ScrollUpImageHeight = 16;
        serverNavBar.ScrollDownImageWidth = 16;
        serverNavBar.ScrollDownImageHeight = 16;
        serverNavBar.DefaultItemTextAlign = ComponentArt.Web.UI.TextAlign.Left;
        serverNavBar.ExpandSinglePath = true;
        serverNavBar.FullExpand = true;
        serverNavBar.Width = Unit.Parse("189");
        serverNavBar.Height = Unit.Parse("300");

        ComponentArt.Web.UI.NavBarItem newItem;
        CategoryCollection subCategories = CategoryDataSource.LoadForParent(0, false);
        int i = 0;
                 
        foreach (Category subCategory in subCategories)
        {

            newItem = new ComponentArt.Web.UI.NavBarItem();
            newItem.Text = subCategory.Name;
            if(i==0)
                 newItem.Expanded = true;
            else
                 newItem.Expanded = false;
            newItem.DefaultSubItemLookId = "Level2ItemLook";
            newItem.SubGroupCssClass = "Level2Group";
            serverNavBar.Items.Add(newItem);
            CategoryCollection childCategories = CategoryDataSource.LoadForParent(subCategory.CategoryId, false);
            foreach (Category childCategoriesList in childCategories)
            {
                newItem = new ComponentArt.Web.UI.NavBarItem();
                newItem.Text = childCategoriesList.Name;
                newItem.NavigateUrl = childCategoriesList.NavigateUrl;
                serverNavBar.Items[i].Items.Add(newItem);
            }
            i++;
        }


    }
   
}

Add the following to /App_Themes/[YOUR CURRENT THEME]/style.css

Code: Select all

.NavBar
{
  background-color: #FFFFFF; 
  border: 1px solid #000000; 
  padding: 2px;
  padding-bottom: 4px;
  cursor: default; 
} 

.TopItem
{
  color: #FFFFFF;
  background-image: url(images/item_bg.gif);
  background-color: #757495; 
  font-family: tahoma, verdana; 
  font-size: 11px; 
  font-weight: bold;
  border:1px solid #696885; 
  border-bottom-color: #57566F; 
  border-right-color: #57566F; 
  padding-top: 4px; 
  padding-bottom: 4px; 
  cursor:hand;
}

.TopItemHover
{
  color: #FFFFFF;
  background-image: url(images/item_hoverBg.gif);
  background-color: #8E8DA9; 
  font-family: tahoma, verdana; 
  font-size: 11px; 
  font-weight: bold;
  border: 1px solid #7C7C94;
  border-bottom-color:#9593B2;
  padding-top: 4px; 
  padding-bottom: 4px; 
  cursor:hand;
}

.Level2Item
{
  font-family: tahoma, verdana; 
  font-size: 11px; 
  padding-left: 10px; 
  cursor:hand;
}

.Level2ItemHover
{
  font-family: tahoma, verdana; 
  font-size: 11px; 
  text-decoration:underline;
  padding-left: 10px; 
  cursor:hand;
}

.Level2Group
{
  background-color:white;
  background-image: url(images/group_bg.gif);
  border-top-color: #F0F1F5;
  padding:10px;
  padding-left:10px;
  padding-right:0px;
}

.Empty
{
}

Copy the two attached image files to the current theme images folder


After doing the above mentioned :

Add follwing line in : App_code/scriplets/Default/sidebar/Standard Sidebar 1.htm

Code: Select all

[[ConLib:Custom\CategoryNavigation]]


I just added the required things for the Navigation bar .......Add your own styles ........... Above Code is enough for the Simple Navigation Bar.

Dont forget to add the scrollup and scrolldown images that i attached..... then scroll won't work in firefox ......

Jinx it works without scroll bar............

Thanks & Regards,
Pat
Attachments
scrollup.gif
scrollup.gif
(70 Bytes) Downloaded 25205 times
scrolldown.gif
scrolldown.gif
(70 Bytes) Downloaded 25205 times

harris43
Lieutenant (LT)
Lieutenant (LT)
Posts: 64
Joined: Fri Oct 13, 2006 12:17 pm

Re: Navigation treeview or flyout menus?

Post by harris43 » Tue Aug 05, 2008 4:30 pm

I used the earlier code from bubbles and it's working fine, but the word "Categories" is above the category menu. Here's the code: [[ConLib:Custom\CategoryTreeView HeaderText=" "]]. It's ignoring it.

Thoughts?

User avatar
jmestep
AbleCommerce Angel
Posts: 8164
Joined: Sun Feb 29, 2004 8:04 pm
Location: Dayton, OH
Contact:

Re: Navigation treeview or flyout menus?

Post by jmestep » Tue Aug 05, 2008 5:27 pm

I don't think that will work on Bumble's code since it's a different conlib. Try taking this out of the code in the previous post:
<asp:Panel ID="HeaderPanel" runat="server" CssClass="header">
<h2 class="header"><asp:Localize ID="HeaderTextLabel" runat="server" Text="Categories"></asp:Localize></h2>
</asp:Panel>
Judy Estep
Web Developer
jestep@web2market.com
http://www.web2market.com
708-653-3100 x209
New search report plugin for business intelligence:
http://www.web2market.com/Search-Report ... -P154.aspx

chuvak
Ensign (ENS)
Ensign (ENS)
Posts: 4
Joined: Wed Aug 13, 2008 12:20 pm

Re: Compunerdy

Post by chuvak » Wed Aug 13, 2008 12:28 pm

Jinx wrote:What are you looking for your navigation to do?

Check this site out (http://www.etillastuffedanimals.com)is this what you want it to do? Or what exactly do you want... Sorry things are slow for me this morning.
Hi, I've been trying to get it working as you have it working on that site. I'm wondering what code did you use?

Right now, the menu is semi-working, with the category disappearing when i go to another page.

I was wondering what code you are using and if I maybe did something wrong, before I go and start to snoop around rewriting the code and reinventing the wheel.

Thanks!

harris43
Lieutenant (LT)
Lieutenant (LT)
Posts: 64
Joined: Fri Oct 13, 2006 12:17 pm

Re: Navigation treeview or flyout menus?

Post by harris43 » Wed Aug 13, 2008 1:12 pm

this started working. The site was caching just this part and wouldn't let go of it.

User avatar
jmestep
AbleCommerce Angel
Posts: 8164
Joined: Sun Feb 29, 2004 8:04 pm
Location: Dayton, OH
Contact:

Re: Navigation treeview or flyout menus?

Post by jmestep » Wed Aug 13, 2008 1:22 pm

Yes, the menu does cache with the time dependent on what is set in the conlib int _CacheDuration = 60;
Judy Estep
Web Developer
jestep@web2market.com
http://www.web2market.com
708-653-3100 x209
New search report plugin for business intelligence:
http://www.web2market.com/Search-Report ... -P154.aspx

User avatar
Sean@WMS
Ensign (ENS)
Ensign (ENS)
Posts: 20
Joined: Tue Nov 20, 2007 8:23 pm
Location: NW California
Contact:

Re: Navigation treeview or flyout menus?

Post by Sean@WMS » Thu Aug 14, 2008 12:11 am

Howdy All,

Johny come lately to this thread here, but I've just started working with AC, AC7 specifically.

I wanted to thank everyone for their contributions here, and as pay back, I wanted to share my successes with this confounded widget.

First of all, I saw some folks on this thread apparently getting stumped with the CSS overflow and HTML nobr tags that ComponentArt throws in by default. When I first installed this from the code Pat_king shared here, I was alarmed by both of these.

Turns out the CSS overflow, or "autoscroll" as ComponentArt calls it, is simple. Just add AutoScroll="false" to the properties:

Code: Select all

            {... other properties ...}
            EnableViewState="false"
            AutoScroll="false"
            runat="server">
Dealing with the nowraps -- technically nobr tags that ComponentArt wraps every item in the tree in -- was much more challenging.

On the surface, this was "theoretically" simple to handle too, with CSS; just find the nobr tags as children of the various classes set as properties in CA, and set the value for the white-space property to "normal" like so:

Code: Select all

.CatTreeNode nobr, .CatSelectedTreeNode nobr, .CatHoverTreeNode nobr {
   white-space: normal;
}
Joy! That killed the "nowrap" effect . . . . but, dang it all!, we've got a new problem: it line wraps after every word ( pulling hair from head and wiskers from beard ).

To solve that, we need to apply width so there is room for the words to expand into before they wrap.

However, this is where it started getting really hairy ( or rather the opposite, as I lost so much hair and so many whiskers over it ).

CA produces the list in a way I really didn't expect. I'd have hoped for an unordered list, which would have made life simple here. But no, for reasons that I'm sure are probably sound from their perspective, each item in the list is actually wrapped in a table -- yeah, a TABLE! Can you believe that? What's worse, each subcat in the list is wrapped in a table with TWO colums, but top level cats are wrapped in a table with only ONE column ( though there is just a little bit of odd spacing to the left I'll address further down here ). That is, allocating that space for the text to fill into before wrapping was pretty tricky.

Finally, I came up with this: having applied the width of the overall category tree menu in .CatTreeView, we just need to be able to find these table cells correctly and give them a width of 100%. So, after much futsing around I finally came up with this:

Code: Select all

#leftSidebarPanel .section .content .CatTreeView > table td:first-child { 
    width: 100%; 
}

#leftSidebarPanel .section .content .CatTreeView table td + td { 
    width: 100%; 
}
NOTE: I had to be very specific here because I was using one of the canned "Glass" themes here, and CA was picking up styles from "#leftSidebarPanel .section .content table"

That is, first find tables contextually with just the one TD ( we can't just set all of the TD's to any width, as the subcats with two TD's will inherit that ), and then find the instances of a TD preceeded by a TD ( i.e., our subcat text; the first TD is populated by CA with a div with width set to the value of what was set for NodeIndent ). Now top level cats will fill out their space allotted and subcats won't get pushed to the right; they will just indent as specified in the NodeIndent property of CA in the first cell, and then expand to fill out the space allotted to them in the second cell. All is well. . . . EXCEPT ( of course! ) in IE 6. I tested in FireFox 2 & 3, IE 7, and Safari 3 for PC's, and it was all good in those browsers. I'd really love it if anyone would pick up the torch from here and figure out how this could be tweeked for IE 6.

However, I was still not finished pulling out hairs and whiskers . . . . There was still one other very bothersome issue with this confounded table layout: I was using background images on the menu.

The problem here is that whatever I had set for background on .CatTreeNode & .CatSelectedTreeNode, & .CatHoverTreeNode didn't apply to the left of these -- for the top level cats, there was a wee bit of space, and for the subcats, there was a space as large as the indent was set for. I needed to be able to background the images at a larger scope than these CSS classes would allow me to do here.

I hit the books on ComponentArt documentation and found that you can add a row property to each of these. So I revised Pat_king's code as follows ( adding a row property to each of these instances ):

Code: Select all

        TreeView1.NodeCssClass = "CatTreeNode";
        TreeView1.NodeRowCssClass = "CatTreeNodeRow";
        TreeView1.SelectedNodeCssClass = "CatSelectedTreeNode";
        TreeView1.SelectedNodeRowCssClass = "CatSelectedTreeNodeRow";
        TreeView1.HoverNodeCssClass = "CatHoverTreeNode";
        TreeView1.HoverNodeRowCssClass = "CatHoverTreeNodeRow";
...
            NodeCssClass="CatTreeNode"
            NodeRowCssClass="CatTreeNodeRow"
            SelectedNodeCssClass="CatSelectedTreeNode"
            SelectedNodeRowCssClass="CatSelectedTreeNodeRow"
            HoverNodeCssClass="CatHoverTreeNode"
            HoverNodeRowCssClass="CatHoverTreeNodeRow"
Then, for the CSS:

Code: Select all

#leftSidebarPanel .section .content .CatTreeView .CatTreeNodeRow {
   background: #F6F5DD url('images/left_panel_item_bg.gif') no-repeat left top;
   cursor: pointer;
}

#leftSidebarPanel .section .content .CatTreeView .CatHoverTreeNodeRow {
   background:#DEF4E8 url('images/left_panel_item_bg_hover_sm.gif') repeat-x left top;
   cursor: pointer; 
}

#leftSidebarPanel .section .content .CatTreeView .CatSelectedTreeNodeRow {
   background:#DEF4E8 url('images/left_panel_item_bg_hover_sm.gif') repeat-x left top;
   cursor: pointer;
}
NOTE: Not sure why I had to be so specific in locating these this way while I could style .CatTreeView .CatTreeNode just fine without providing context like this, but for the "*Row" elements, I had to get this specific for them to work. This might be because of the styling in the "Glass" theme I was using which I noticed CA was inheriting in some contexts.

This provides the proper styling to the entire row ( minus what's in the div that CA stuffs the text into ). Unfortunately, it also means that the background image has to be loaded multiple times: for top level cats, there's the row background and the background behind the div for the text that CA produces, and for subcats there's that plus the table-row to the left.

After all of this, I honestly have to say that while it is super cool for AC to include CompentArt under their royalty free licensing for those who might find interesting advantages, I think this is entirely way too much overhead ( it's like going around the world just to cross the street ) and way more learning curve than one should expect from a typical user ( I'm an experienced programmer, and it took me two days of study & trial and error ). I really can't see why AC can't put out an "ExtendedCategoryList" control rather like the SimpleCategoryList control, but expanding to the subcategory list under the parent category selected writing it out as a standard nested unordered list, esp. as using ComponentArt for this dramatically slows down page load, not to mention what a big PITA it makes styling it in interesting ways.

At the end of all of this, I still can't get this looking right in IE6, so I'd really love it if someone would run with what I've pushed forward here and suggest a remedy for IE6 as well.


Finally, here is my complete source code given all of this. There are some contextual labels based on one of the "Glass" themes I started with -- so for some, this might just "plug & play" if you are using one of these themes as a base, and for others, you'll have to edit the CSS accordingly:

CategoryTreeView.ascx

Code: Select all

<%@ Control Language="C#" ClassName="CategoryTreeView" EnableViewState="false" %>
<%@ Register TagPrefix="ComponentArt" Namespace="ComponentArt.Web.UI" Assembly="ComponentArt.Web.UI" %>
<%--
<conlib>
<summary>Displays the categories in your store in a treeview.</summary>
<param name="CacheDuration" default="60">Number of minutes the category tree will remain cached in memory.  Set to 0 to disable caching.</param>
</conlib>
--%>
<script runat="server">
    //to clear category tree cache use this page ClearCategoryTreeCache.aspx

    int _CacheDuration = 60;
    public int CacheDuration
    {
        get { return _CacheDuration; }
        set { _CacheDuration = value; }
    }

    protected void Page_Init(object sender, EventArgs e)
    {
        InitializeCategoryTree();
    }

    private void InitializeCategoryTree()
    {
        TreeView1.ShowLines = false;
        TreeView1.ImagesBaseUrl = "/App_Themes/" + Page.Theme + "/images/CategoryTreeView/";
        TreeView1.CssClass = "CatTreeView";
        TreeView1.NodeCssClass = "CatTreeNode";
        TreeView1.NodeRowCssClass = "CatTreeNodeRow";
        TreeView1.SelectedNodeCssClass = "CatSelectedTreeNode";
        TreeView1.SelectedNodeRowCssClass = "CatSelectedTreeNodeRow";
        TreeView1.HoverNodeCssClass = "CatHoverTreeNode";
        TreeView1.HoverNodeRowCssClass = "CatHoverTreeNodeRow";

        GetCategoryTreeNodes();

        // Specify the current category
        int categoryId = PageHelper.GetCategoryId();
        TreeViewNode node = TreeView1.FindNodeById(categoryId.ToString());
        if (node != null)
        {
            node.TemplateId = "SelectedCategoryTemplate";
            node.Expanded = true;
            EnsureTreeNodeVisible(node);
        }
    }

    private void GetCategoryTreeNodes()
    {
        string cacheKey = "53741CA849784C8DA262F53638A2A38F";
        string categoryNodes = null;

        if (_CacheDuration > 0)
        {
            // Check to see if category treeview is in the cache
            categoryNodes = Cache.Get(cacheKey) as string;
        }

        if (categoryNodes == null)
        {
            GetCategoryNodesRecursive(0, TreeView1.Nodes);
            Cache.Insert(cacheKey, TreeView1.GetXml(), null, DateTime.Now.AddMinutes(_CacheDuration), System.Web.Caching.Cache.NoSlidingExpiration, System.Web.Caching.CacheItemPriority.High, null);
        }
        else
        {
            // Load Nodes from the cached xml string
            TreeView1.LoadXml(categoryNodes);
        }
    }

    private void GetCategoryNodesRecursive(int categoryId, TreeViewNodeCollection nodes)
    {
        TreeViewNode node;

        CategoryCollection subcategories = CategoryDataSource.LoadForParent(categoryId, true);
        foreach (Category subcat in subcategories)
        {
            node = new TreeViewNode();
            node.ID = subcat.CategoryId.ToString();
            node.Text = subcat.Name;
            node.NavigateUrl = subcat.NavigateUrl;
            //node.ImageUrl = subcat.ThumbnailUrl;
            nodes.Add(node);

            GetCategoryNodesRecursive(subcat.CategoryId, node.Nodes);
        }
    } 
    
    

    private void EnsureTreeNodeVisible(TreeViewNode node)
    {
        TreeViewNode currentNode = node.ParentNode;

        while (currentNode != null)
        {
            currentNode.Expanded = true;
            currentNode = currentNode.ParentNode;
        }
    }
</script>
<asp:Panel ID="MainPanel" runat="server" CssClass="section">
    <asp:Panel ID="HeaderPanel" runat="server" CssClass="header">    
       <h2 class="header"><asp:Localize ID="HeaderTextLabel" runat="server" Text="Categories"></asp:Localize></h2>
    </asp:Panel>
 
   <asp:Panel ID="TreePanel" runat="server" CssClass="content">
      
        <ComponentArt:TreeView id="TreeView1"
            
            Width="178px"
            DragAndDropEnabled="false"
            NodeEditingEnabled="false"
            KeyboardEnabled="true"
            CssClass="CatTreeView"
            NodeCssClass="CatTreeNode"
            NodeRowCssClass="CatTreeNodeRow"
            SelectedNodeCssClass="CatSelectedTreeNode"
            SelectedNodeRowCssClass="CatSelectedTreeNodeRow"
            HoverNodeCssClass="CatHoverTreeNode"
            HoverNodeRowCssClass="CatHoverTreeNodeRow"
            DefaultImageWidth="0"
            DefaultImageHeight="0"
            ExpandCollapseImageWidth="0"
            ExpandSelectedPath="true"
            ExpandCollapseImageHeight="0"
            NodeIndent="10"
            ItemSpacing="0"
            NodeLabelPadding="0"
            CollapseImageUrl=""
            ExpandImageUrl=""
            ParentNodeImageUrl=""
            LeafNodeImageUrl=""
            ShowLines="false"
            EnableViewState="false"
            AutoScroll="false"
            runat="server">
            <Templates>
                <ComponentArt:NavigationCustomTemplate id="SelectedCategoryTemplate">
                    <Template>
                        <strong><%# DataBinder.Eval(Container.DataItem, "Text") %></strong></Template>
                </ComponentArt:NavigationCustomTemplate>
            </Templates>
        </ComponentArt:TreeView>
    </asp:Panel>
</asp:Panel>
CSS:

Code: Select all

/******************************************************************************************/
/* styles for the category treeview (such as might show on the home page)                 */
/******************************************************************************************/

.CatTreeView {
	width: 174px;
	background: transparent;
}

#leftSidebarPanel .section .content .CatTreeView table { 
	width: 100%; 
	border-top: 0; 
	border-right: solid 1px #8ED4AF; 
	border-bottom: solid 1px #8ED4AF; 
	border-left: solid 1px #8ED4AF; 
	border-collapse:inherit!important;
	background: transparent; 
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
}

#leftSidebarPanel .section .content .CatTreeView > table td:first-child { 
    width: 100%; 
}

#leftSidebarPanel .section .content .CatTreeView table td + td { 
    width: 100%; 
}

.CatTreeNode {
	padding: 8px 3px 8px 13px;
	background: #F6F5DD url('images/left_panel_item_bg.gif') no-repeat left top;
	color: #661A29;
	cursor: pointer;
}

#leftSidebarPanel .section .content .CatTreeView .CatTreeNodeRow {
	background: #F6F5DD url('images/left_panel_item_bg.gif') no-repeat left top;
	cursor: pointer;
}

.CatHoverTreeNode {
	padding: 8px 3px 8px 26px;
	background:#DEF4E8 url('images/left_panel_item_bg_hover.gif') no-repeat left top;
	color: #006729;
	cursor: pointer; 
}

#leftSidebarPanel .section .content .CatTreeView .CatHoverTreeNodeRow {
	background:#DEF4E8 url('images/left_panel_item_bg_hover_sm.gif') repeat-x left top;
	cursor: pointer; 
}

.CatSelectedTreeNode {
	padding: 8px 3px 8px 26px;
	color: #006729;
	background:#DEF4E8 url('images/left_panel_item_bg_hover.gif') no-repeat left top;
	cursor: pointer;
}

#leftSidebarPanel .section .content .CatTreeView .CatSelectedTreeNodeRow {
	background:#DEF4E8 url('images/left_panel_item_bg_hover_sm.gif') repeat-x left top;
	cursor: pointer;
}

.CatTreeNode nobr, .CatSelectedTreeNode nobr, .CatHoverTreeNode nobr {
	white-space: normal;
}
/******************************************************************************************/
/* end styles for the category treeview (such as might show on the home page)             */
/******************************************************************************************/
PS: If anyone wants to see this all in action, I've done this on BarParts.com ( though things might change aver this post )
Sean Connors
Web Merchant Services
Supplying the services you need to succeed online
www.WMSmerchantservices.com

User avatar
jmestep
AbleCommerce Angel
Posts: 8164
Joined: Sun Feb 29, 2004 8:04 pm
Location: Dayton, OH
Contact:

Re: Navigation treeview or flyout menus?

Post by jmestep » Thu Aug 14, 2008 8:55 am

There are actually two different components in this post. The treeview and the navbar. Pat_King's code was for the navbar-- when you click on the top link, it expands/scrolls to display the other links. When I tried it some but wanted to change the appearance and didn't get far with that.
For the treeview, mazhar has posted code using the .net treeview and not the ComponenetArt treeview and it handles word wrap.
viewtopic.php?f=42&t=7829&p=33634

I haven't implemented it, but I think it is lighter weight than the ComponentArt one.

viewtopic.php?f=42&t=7829&p=33634
Judy Estep
Web Developer
jestep@web2market.com
http://www.web2market.com
708-653-3100 x209
New search report plugin for business intelligence:
http://www.web2market.com/Search-Report ... -P154.aspx

chuvak
Ensign (ENS)
Ensign (ENS)
Posts: 4
Joined: Wed Aug 13, 2008 12:20 pm

Re: Navigation treeview or flyout menus?

Post by chuvak » Fri Aug 15, 2008 2:07 pm

This is weird. I seem to be having trouble applying the css styling to the menu. It also tells me it can't find class CatTreeView..anyone have any ideas how to get That part working?

User avatar
Sean@WMS
Ensign (ENS)
Ensign (ENS)
Posts: 20
Joined: Tue Nov 20, 2007 8:23 pm
Location: NW California
Contact:

Re: Navigation treeview or flyout menus?

Post by Sean@WMS » Fri Aug 15, 2008 2:32 pm

Try being very specific about your inheritance, something like:

Code: Select all

#leftSidebarPanel .section .content .CatTreeView
Sean Connors
Web Merchant Services
Supplying the services you need to succeed online
www.WMSmerchantservices.com

User avatar
jmestep
AbleCommerce Angel
Posts: 8164
Joined: Sun Feb 29, 2004 8:04 pm
Location: Dayton, OH
Contact:

Re: Navigation treeview or flyout menus?

Post by jmestep » Tue Aug 19, 2008 12:43 pm

Here's a flyout menu using ComponentArt stuff:
viewtopic.php?f=47&t=7986
Judy Estep
Web Developer
jestep@web2market.com
http://www.web2market.com
708-653-3100 x209
New search report plugin for business intelligence:
http://www.web2market.com/Search-Report ... -P154.aspx

User avatar
ajasko
Lieutenant (LT)
Lieutenant (LT)
Posts: 53
Joined: Sun Sep 23, 2007 8:04 pm
Contact:

Re:

Post by ajasko » Wed Sep 17, 2008 4:10 pm

Shopping Cart Admin wrote:Hello Haak,

We've tried a number of commercially available fly out menus and they produced horribly bloated code that noticeably slowed page load. The one on the admin side is our custom control, which on our demo store reduced page size by almost 100k.

We're short staffed this week, but we'll get something out for the retail side for this next week. This is already on the custom control todo list.
Mike,
(or anyone who knows) - Has Able come out with a custom control for a Nested Tree Sidebar yet?

Post Reply