Extended Category List Control

[mazhar]

I have read some posts in which people are looking for some category control for sidebar which shows a complete list of categories across the store. In fact this functionality does exist in the AbleCommerce but on Merchant side and you can see it when changing categories for a product from Edit Product page. It can be easily brought to the store side.

So I have created a ConLib control for this purpose. Currently this is a very basic control ... let the community gradually improve it with respect to styles etc.

Please check the attachment for control's code
Screen Shot

[jmestep]

Thank you, thank you. Will it take care of the problem some of us are having with long category names not wrapping?

[mazhar]

Thank you, thank you. Will it take care of the problem some of us are having with long category names not wrapping?

hmm well it doesn't. It would be nice to have that feature.

[sacards.com]

what about not displaying empty categories?

[mazhar]

what about not displaying empty categories?

better this should be a parameter for example something like
[[ConLib:CategoryListEx ShowEmptyCats = "false"]]

[evanb@firefold.com]

It looks like it automatically writes css to style it. Can I omit that functionality and then assign my own properties in my stylesheet?

Also you could probably get the text to wrap by setting a fixed width for the sidebar, and then using the word-wrap css function.

[mazhar]

Yes you can provide your own styles. Please check the following link
http://www.componentart.com/webui/demos ... Form1.aspx
Here is a great help regarding the styling etc. Click the SHOW CODE button and it will show you the CSS, HTML and ASP.NET code for the samples.

Also you could probably get the text to wrap by setting a fixed width for the sidebar, and then using the word-wrap css function.

You can give a try if it do so then its OK other wise we may have you use custom template with the tree.

[evanb@firefold.com]

This is being written automatically:

Code: Select all

<style>.ctv_TreeView {background-color:#F6F6F6;border:1px solid black;padding:2px;padding-left:5px;}
.ctv_Node {background-color:#3F3F3F;color:white;font-family:verdana;font-size:11px;padding:2px;padding-left:10px;border:1px;border-color:black;border-top-color:#808080;border-left-color:#808080;border-style:solid;cursor:pointer;} 
.ctv_HoverNode {background-color:#8D8F95;color:white;font-family:verdana;font-size:11px;padding:2px;padding-left:10px;border:1px;border-color:#555555;border-top-color:#B8B8B9;border-left-color:#B8B8B9;border-style:solid;cursor:pointer;} 
.ctv_SelectedNode {background-color:#8D8F95;color:white;font-family:verdana;font-size:11px;padding:2px;padding-left:10px;border:1px;border-color:#B8B8B9;border-top-color:#555555;border-left-color:#555555;border-style:solid;cursor:default;} 
</style>

I want to get rid of that, how do I do that?

[harris43]

This downloaded page doesn't work the way you describe. It is only showing me top level categories. It has the gray background styling, but it won't list any subcategories. Was there something else I had to do?

[evanb@firefold.com]

Currently this is a very basic control ... let the community gradually improve it with respect to styles etc.

Still has some development to go.

Have a good weekend Able team!

[Robbie@FireFold]

Can't wait to see what Evan can work out on this one.

We will be using this on our site.

[jmestep]

There was an earlier post using another variation of the component art category tree here that showed more about how to style it:
viewtopic.php?f=47&t=5740

[Robbie@FireFold]

Any more thoughts on where this gets it style from?

I checked the link, but was really unable to understand.

This would look great on FireFold.

[jmestep]

Mazhar- If you can give us code for the use of the category tree in the admin, only coded for the website, I think that would help with our word wrap problem. The lines wrap there-- it looks like it might not be using the ComponentArt treeview. I just can't figure out how to code it to build the menu.

[mazhar]

On the admin i used the following page as a sample

Code: Select all

Website\Admin\Products\EditProductCategories.aspx

[harris43]

There was another thread about these custom categories. I remember that one of the questions was about images showing up as category icons that shouldn't be. Instead of using the assigned category folder icon (bumble bee's code?), the code was grabbing a product image some how. Now that's happening to me and I cannot find the fix.

Can anyone point me to this?

[jmestep]

I was looking at the one under Admin/Catalog CategoryTree.ascx. It looks like it started out using ComponentArt, then that code is commented out and it uses the ASP.net control. Maybe that user control isn't used anywhere- I had just been poking around looking for one that had wrap on the long category names.

[harris43]

any idea how to get rid of these category images?

[Shopping Cart Admin]

Hello Judy,

Yes the CA tree was adding about 70k in code to each page and was deemed to slow for our purposes. It's elegant but 70k per page load isn't.

[mazhar]

ASP.NET Tree View supports the word wrap. I think with a few modifications some one can easily bind the ASP.NET tree in this control instead of the Component Art Tree.

[mazhar]

ASP.NET TreeView Supported
This was very easy to make our current control work with ASP.NET TreeView. For source code please download the attachment. ASP.NET TreeView supports a word wrap property so many people would be happy with this one...

[jmestep]

Thanks, mazhar. That is what I was needing.

[efficiondave]

Anyone know if the asp:TreeView is Search Engine Friendly?

Also, there's an extra line in the code provided that references the ComponentArt control that should be removed.

[diveloper]

Great topic and addition to the "ConLib:CatalogTree", dated back in July 2008.
But still even when adding this feature today, "out of the box", it does not follow where you are? Navigate using the "ConLib:CatalogTree" and it never changes as you click-through, not following where you are. How is this useful "out of the box"? Why customize this when the website visitor navigates and the tree/navigation stays the same? Should be called static category list, where's the control?

As for the posted issue original >>> "Stop Category Menu Hidding" >>> viewtopic.php?f=42&t=12473&p=53730#p53730

Lets be practical here. What good is a category menu if it does not follow the user? Why should we have to customize this? I am referring to the "ConLib:SimpleCategoryList".

[DBounlom]

Hi,
I'm trying to implement this tree structure; however, I am having a problem with specific categories being unable to load. This happens when I have a category that has only a single category (no products) listed, and then products within that single category.

i.e.
Category 1
Subcategory 1
Products

Also, I am unable to view the Subcategory in the tree structure.

Things work fine when I have multiple Subcategories
i.e.
Category 1
Subcategory 1
Products
Subcategory 2


When I click on the category in the first example, I receive the following error on my browser:

Server Error in '/' Application.

Object reference not set to an instance of an object.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

Source Error:

The source code that generated this unhandled exception can only be shown when compiled in debug mode. To enable this, please follow one of the below steps, then request the URL:

1. Add a "Debug=true" directive at the top of the file that generated the error. Example:

<%@ Page Language="C#" Debug="true" %>

or:

2) Add the following section to the configuration file of your application:

<configuration>
<system.web>
<compilation debug="true"/>
</system.web>
</configuration>

Note that this second technique will cause all files within a given application to be compiled in debug mode. The first technique will cause only that particular file to be compiled in debug mode.

Important: Running applications in debug mode does incur a memory/performance overhead. You should make sure that an application has debugging disabled before deploying into production scenario.

Stack Trace:


[NullReferenceException: Object reference not set to an instance of an object.]
ASP.CategoryListEx.ExpandSelectedPath() +293
ASP.CategoryListEx.Page_Load(Object sender, EventArgs e) +49
System.Web.Util.CalliHelper.EventArgFunctionCaller(IntPtr fp, Object o, Object t, EventArgs e) +14
System.Web.Util.CalliEventHandlerDelegateProxy.Callback(Object sender, EventArgs e) +35
System.Web.UI.Control.OnLoad(EventArgs e) +99
System.Web.UI.Control.LoadRecursive() +50
System.Web.UI.Control.LoadRecursive() +141
System.Web.UI.Control.LoadRecursive() +141
System.Web.UI.Control.LoadRecursive() +141
System.Web.UI.Control.LoadRecursive() +141
System.Web.UI.Control.LoadRecursive() +141
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +627

Version Information: Microsoft .NET Framework Version:2.0.50727.4211; ASP.NET Version:2.0.50727.4209

Thanks for your help!