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.
ayilmaz
Ensign (ENS)
Ensign (ENS)
Posts: 20
Joined: Thu Jan 03, 2008 4:37 pm

How to keep the left side menu

Post by ayilmaz » Fri Jan 04, 2008 2:19 pm

Hi,
Thanks for showing how to implement the ComponentArt tree view for category navigation. I also tried it and it works really nice. Great post! I have a question though. I want this menu on all other pages. How can I do this? I would appreciate your answer.
Thanks a lot,
Ayilmaz

User avatar
freedom1029
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 35
Joined: Thu Nov 01, 2007 1:40 pm
Location: Montreal

Post by freedom1029 » Fri Jan 04, 2008 2:24 pm

Look at the previous post from Bumbles. I think it is well explain in there.

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

Indenting Child Links and tweaking Bumbles code

Post by Jinx » Tue Jan 08, 2008 3:12 pm

Is there any way to control the indenting of the child links as well as the main category links? Is there a way to apply a separate CSS style just to the child links? When the child links are too long a horizontal scroll bar appears. Is there a way they could wrap instead of initiating a scrolling window?

Just trying to tweak it. If anyone has any ideas I would greatly appreciate it.

Thanks,
Chris

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

Well getting there...

Post by Jinx » Wed Jan 09, 2008 8:30 am

I have the indents figured out... Node Indent in the parameters on the categorytreeview.aspx file. But I would still like to style the component to not have scroll bars and wrap instead as well as applying styling only to the sub categories and not all the categories.. Let me know if anyone comes up with anything.

Thanks. :D

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

Possible Enhancement

Post by Jinx » Wed Jan 09, 2008 8:41 am

What would be really cool is if someone would know how to make the expansion happen by clicking on the category link to open up to the sub categories instead of clicking on an expansion icon to do the same. So the logic would be that if there is sub categories by clicking on the main category link it would activate the ajax sub category expansion instead of going to a page. If a category would not have any sub categories by clicking on the link you would go to the page just like you do now.

Just an idea.

User avatar
freedom1029
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 35
Joined: Thu Nov 01, 2007 1:40 pm
Location: Montreal

Post by freedom1029 » Wed Jan 09, 2008 9:15 am

This component beeing from ComponetArt I am sure this should be possible because if you look at their web site http://www.componentart.com/webui/demos ... form1.aspx
you will find examples with available code that are doing what you mentionned.

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

Close...

Post by Jinx » Wed Jan 09, 2008 9:55 am

Those examples are close but do not demonstrate any going to urls...

This is the code that I can pinpoint where the url is getting written for ALL categories regardless if they are subcategory or main category..

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);
}
}

If I comment out the part about node.NavigateURL the ajax works but the sub cats of course then loose their ability to navigate to the appropriate sub category link. Anyone have an idea on how to adjust this code so it only writes the node.NavigateURL for subcategories with product or main categories with product and no sub cats?

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

Component Art NAVBAR

Post by Jinx » Wed Jan 09, 2008 10:02 am

Does Able 7.0 support component arts "NAVBAR" element? Maybe it would be easier to use this component instead of the "TreeView" Element in order to achieve what I am looking for.

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

Re: Close...

Post by Bumbles » Wed Jan 09, 2008 11:38 pm

Jinx wrote:If I comment out the part about node.NavigateURL the ajax works but the sub cats of course then loose their ability to navigate to the appropriate sub category link. Anyone have an idea on how to adjust this code so it only writes the node.NavigateURL for subcategories with product or main categories with product and no sub cats?
If you replace GetCategoryNodesRecursive method with the one below, it should do what you need. I've also made it list the number of items in each category which you can easily remove it you want.

Code: Select all

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();
	    
        int nonCatalogNodeCount = 0;
        foreach (CatalogNode subcatNode in subcat.CatalogNodes)
        {
            if (subcatNode.CatalogNodeType != CatalogNodeType.Category)
            {
                nonCatalogNodeCount++;
            }
        }

        if (nonCatalogNodeCount > 0)
        {
            // Show the number of items in the category in brackets after the category name
            // if you don't want this then replace with:
            // node.Text = subcat.Name;
            node.Text = string.Format("{0} ({1})", subcat.Name, nonCatalogNodeCount);
            node.NavigateUrl = subcat.NavigateUrl;
        }
        else
        {
            node.Text = subcat.Name;
        }

        node.ImageUrl = subcat.ThumbnailUrl;
        nodes.Add(node);

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

JimCrisp
Ensign (ENS)
Ensign (ENS)
Posts: 20
Joined: Thu Oct 25, 2007 1:28 pm

Post by JimCrisp » Thu Jan 10, 2008 11:33 am

FYI,
I've played with a variation of this with the componentart menu control. I created a Horizontal Menu bar which has my main categories and "flyout" menus for the subs.
You can see it on our site...

http://www.diamondandgoldoverstocks.com

If it is something you'd like, I can send it to you.

User avatar
compunerdy
Admiral (ADM)
Admiral (ADM)
Posts: 1283
Joined: Sun Nov 18, 2007 3:55 pm

Post by compunerdy » Thu Jan 10, 2008 12:29 pm

Jim your menu looks nice. I would take out the text resize when hovering on the top bar though. It looks a little wigged out and is not really needed since you change the background anyways.

JimCrisp
Ensign (ENS)
Ensign (ENS)
Posts: 20
Joined: Thu Oct 25, 2007 1:28 pm

Post by JimCrisp » Fri Jan 11, 2008 11:17 am

Thanks for the input.
I was trying to figure out why that was happening and you pointed me in the right direction.
Here's the deal for anyone who cares: The person adding product was bolding the category title in the maint screen.
When I was loading the category, I was stripping out the <b> before putting that in the text of the menu, BUT it still remained bold...not sure why or how. My CSS did not specify bold so when it was transitioning from tag to tag you could see for just an instant that the cat name was going back to regular, then back to bold...geezz...anyhoo, I just changed the CSS to make the font bold all the time and viola! it appears much better.
Very odd...

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

Component Art "NAVBAR"

Post by Jinx » Fri Jan 11, 2008 12:39 pm

This next week I am going to start writing a category navigation component for Able using the Component Art NAVBAR if it is supported. I will post it after I have completed it if anyone is interested.

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

Thanks Bumbles

Post by Jinx » Mon Jan 14, 2008 1:52 pm

The code you listed above for the tree works perfectly... A note for everyone is that it allows the category link to initiate the drop-down instead of the icon and it only works if there is a subcategory and no product in the category, otherwise it works just like a link to the category page. PERFECT and thanks a bunch... I am going to use this code now as I am having trouble integrating the "Component Art" "NavBar" component that I wanted to try.

Anyone want to try their hand at the NAVBAR and I wouldn't argue... :wink:

Again thanks a bunch, the code rocks and I will post a link to it when the site goes live.

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

Post by Bumbles » Mon Jan 14, 2008 3:04 pm

Glad you found it useful. :) Might have a look at the NAVBAR component at some point if I get time.

User avatar
Road Rider
Commander (CMDR)
Commander (CMDR)
Posts: 144
Joined: Sat Jan 26, 2008 12:43 pm
Contact:

Post by Road Rider » Wed Feb 06, 2008 6:18 pm

OH NO!!!! I believe I found what I am in search of and the link for all of compunerdy stuff no workie..

HELP
Doug Morrison
Director of Marketing and eCommerce
Bike Authority
http://www.bikeauthority.com

User avatar
compunerdy
Admiral (ADM)
Admiral (ADM)
Posts: 1283
Joined: Sun Nov 18, 2007 3:55 pm

Post by compunerdy » Wed Feb 06, 2008 6:46 pm

Use the code Bumbles posted..its a better setup.

User avatar
Road Rider
Commander (CMDR)
Commander (CMDR)
Posts: 144
Joined: Sat Jan 26, 2008 12:43 pm
Contact:

Post by Road Rider » Wed Feb 06, 2008 7:14 pm

Thanks, I did and it works. I am having one problem though. None of the 4 .gif files are being displayed next to the category tree. I have checked and double checked file names and locations (I mostly copy/paste everything) and it appears to be correct. Any thoughts?
Doug Morrison
Director of Marketing and eCommerce
Bike Authority
http://www.bikeauthority.com

User avatar
Road Rider
Commander (CMDR)
Commander (CMDR)
Posts: 144
Joined: Sat Jan 26, 2008 12:43 pm
Contact:

Post by Road Rider » Wed Feb 06, 2008 8:52 pm

A bit more info:

It is trying to display them. When the page loads you can see a "place holder" for the .gif images but once the page loads.... zip, ziltch, nadda!
Doug Morrison
Director of Marketing and eCommerce
Bike Authority
http://www.bikeauthority.com

User avatar
compunerdy
Admiral (ADM)
Admiral (ADM)
Posts: 1283
Joined: Sun Nov 18, 2007 3:55 pm

Post by compunerdy » Wed Feb 06, 2008 11:43 pm

Hmm.. got a linky?

User avatar
Road Rider
Commander (CMDR)
Commander (CMDR)
Posts: 144
Joined: Sat Jan 26, 2008 12:43 pm
Contact:

Post by Road Rider » Wed Feb 06, 2008 11:59 pm

Sure do. Thank for lookie.

http://64.78.24.30/ablecomm/Default.aspx
Doug Morrison
Director of Marketing and eCommerce
Bike Authority
http://www.bikeauthority.com

User avatar
compunerdy
Admiral (ADM)
Admiral (ADM)
Posts: 1283
Joined: Sun Nov 18, 2007 3:55 pm

Post by compunerdy » Thu Feb 07, 2008 12:23 am

Code: Select all

http://64.78.24.30/App_Themes/BikeAuthority/images/CategoryTreeView/folders.gif
That is the correct location where you have the images?

User avatar
Road Rider
Commander (CMDR)
Commander (CMDR)
Posts: 144
Joined: Sat Jan 26, 2008 12:43 pm
Contact:

Post by Road Rider » Thu Feb 07, 2008 7:19 am

Yep it is.

And if you right click the place holder area where the .gif should be, and get the properties for it.... it is where it should be?
Doug Morrison
Director of Marketing and eCommerce
Bike Authority
http://www.bikeauthority.com

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

Looks like you are missing one folder

Post by Jinx » Thu Feb 07, 2008 7:31 am

Here is where you said you have the images pointing to...
http://64.78.24.30/App_Themes/BikeAutho ... olders.gif

but you say this is the link to your site...
http://64.78.24.30/ablecomm/Default.aspx

If this is true then the link to your images needs to be
http://64.78.24.30/ablecomm/
App_Themes/BikeAuthority/images/CategoryTreeView/folders.gif

Now don't forget that when you go live you should change the ip numbers to your url and adjust accordingly.

User avatar
Road Rider
Commander (CMDR)
Commander (CMDR)
Posts: 144
Joined: Sat Jan 26, 2008 12:43 pm
Contact:

Post by Road Rider » Thu Feb 07, 2008 7:43 am

Duh... Thanks Jinx, works great.
Doug Morrison
Director of Marketing and eCommerce
Bike Authority
http://www.bikeauthority.com

Post Reply