Navigation treeview or flyout menus?
How to keep the left side menu
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
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
- freedom1029
- Lieutenant, Jr. Grade (LT JG)
- Posts: 35
- Joined: Thu Nov 01, 2007 1:40 pm
- Location: Montreal
Indenting Child Links and tweaking Bumbles code
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
Just trying to tweak it. If anyone has any ideas I would greatly appreciate it.
Thanks,
Chris
Well getting there...
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.
Thanks.
Possible Enhancement
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.
Just an idea.
- freedom1029
- Lieutenant, Jr. Grade (LT JG)
- Posts: 35
- Joined: Thu Nov 01, 2007 1:40 pm
- Location: Montreal
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.
you will find examples with available code that are doing what you mentionned.
Close...
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?
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?
Component Art NAVBAR
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.
Re: Close...
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.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?
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);
}
}
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.
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.
- compunerdy
- Admiral (ADM)
- Posts: 1283
- Joined: Sun Nov 18, 2007 3:55 pm
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...
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...
Component Art "NAVBAR"
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.
Thanks Bumbles
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...
Again thanks a bunch, the code rocks and I will post a link to it when the site goes live.
Anyone want to try their hand at the NAVBAR and I wouldn't argue...
Again thanks a bunch, the code rocks and I will post a link to it when the site goes live.
- Road Rider
- Commander (CMDR)
- Posts: 144
- Joined: Sat Jan 26, 2008 12:43 pm
- Contact:
- compunerdy
- Admiral (ADM)
- Posts: 1283
- Joined: Sun Nov 18, 2007 3:55 pm
- Road Rider
- Commander (CMDR)
- Posts: 144
- Joined: Sat Jan 26, 2008 12:43 pm
- Contact:
- Road Rider
- Commander (CMDR)
- Posts: 144
- Joined: Sat Jan 26, 2008 12:43 pm
- Contact:
- compunerdy
- Admiral (ADM)
- Posts: 1283
- Joined: Sun Nov 18, 2007 3:55 pm
- Road Rider
- Commander (CMDR)
- Posts: 144
- Joined: Sat Jan 26, 2008 12:43 pm
- Contact:
- compunerdy
- Admiral (ADM)
- Posts: 1283
- Joined: Sun Nov 18, 2007 3:55 pm
Code: Select all
http://64.78.24.30/App_Themes/BikeAuthority/images/CategoryTreeView/folders.gif
- Road Rider
- Commander (CMDR)
- Posts: 144
- Joined: Sat Jan 26, 2008 12:43 pm
- Contact:
Looks like you are missing one folder
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.
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.
- Road Rider
- Commander (CMDR)
- Posts: 144
- Joined: Sat Jan 26, 2008 12:43 pm
- Contact: