Treeview for gold?

[compunerdy]

Anyone have a treeview sample/files that works with gold?

[mazhar]

Here is the Category List using ASP.NET tree view

[compunerdy]

Thanks Maz..the code works but can you set it up to use the same css styling/layout as SimpleCategoryList? I am just looking for the same outer border, header, etc..

[compunerdy]

I got it to work by hacking the two codes together.. I just changed the DIV section to this..

Code: Select all

<div class="widget simpleCategoryListWidget">
    <asp:Panel ID="MainPanel" runat="server" CssClass="innerSection">
        <asp:Panel ID="HeaderPanel" runat="server" CssClass="header">
	       
<h2><asp:Localize ID="HeaderTextLabel" runat="server" Text="Categories"></asp:Localize></h2>
        </asp:Panel>
	    <asp:Panel ID="ContentPanel" runat="server" CssClass="content">
<asp:TreeView ID="CategoryTree" runat="server" EnableViewState="true" ExpandDepth="0" NodeWrap="True">
    </asp:TreeView>                 
        </asp:Panel>
    </asp:Panel>
</div>

[Tea-Dev]

What do we have to modify to get this to be registered as a SidebarControl so we can assign this to the category grid?

We had trouble converting the sample to a .ascx and .ascx.cs file to make the appropriate changes

We have attached the files we attempted to create...

SimpleCategoryListEx.rar

[ForumsAdmin]

Just update the control to mark it as implementing ISidebarControl interface. It will start appearing as a control available for sidebars.

Code: Select all

public partial class SimpleCategoryListEx : System.Web.UI.UserControl, ISidebarControl

[Tea-Dev]

I understand what you are saying but the code that was posted by MAZHAR (CategoryListEx(AC Gold).zip) on 2/11/2013 which is shown below. Where would I add the "System.Web.UI.UserControl, ISidebarControl" in the code below. I don't think that will work.

We tried to split the code so we can do what you suggested but can't get it to work. I posted source code 4/11.
Thanks for your help.

<%@ Control Language="C#" ClassName="CategoryListEx" %>

<script runat="server">

int _CategoryId;
protected void Page_Load(object sender, EventArgs e)
{
_CategoryId = AbleCommerce.Code.PageHelper.GetCategoryId();
if (!Page.IsPostBack)
PopulateTree();
ExpandSelectedPath();
}

private void PopulateTree()
{
CategoryTree.Nodes.Clear();
IList<Category> children = CategoryDataSource.LoadForParent(0, true);
foreach (Category child in children)
{
TreeNode newNode = new TreeNode();
newNode.Text = child.Name;
newNode.Value = child.Id.ToString();
newNode.NavigateUrl = child.NavigateUrl;
if (CategoryDataSource.CountForParent(child.Id) > 0)
PopulateTreeNode(newNode, child.Id);
CategoryTree.Nodes.Add(newNode);
}
CategoryTree.DataBind();
}
private void PopulateTreeNode(TreeNode parentNode,int categoryId)
{
IList<Category> children = CategoryDataSource.LoadForParent(categoryId, true);
foreach (Category child in children)
{
TreeNode newNode = new TreeNode();
newNode.Text = child.Name;
newNode.Value = child.Id.ToString();
if (CategoryDataSource.CountForParent(child.Id) > 1)
PopulateTreeNode(newNode, child.Id);
newNode.NavigateUrl = child.NavigateUrl;
parentNode.ChildNodes.Add(newNode);
}
}

private void ExpandSelectedPath()
{
IList<CatalogPathNode> path = CatalogDataSource.GetPath(_CategoryId, true);
StringBuilder valuePath = new StringBuilder();
foreach (CatalogPathNode pathNode in path)
{
if (pathNode.CatalogNodeId == 0)
continue;
if (valuePath.Length > 0) valuePath.Append(CategoryTree.PathSeparator);
valuePath.Append(pathNode.CatalogNodeId);
TreeNode treeNode = CategoryTree.FindNode(valuePath.ToString());
treeNode.Selected = true;
treeNode.Expand();
}
}

</script>
<div class="pageHeader">
<div class="caption">
<h1>
<asp:Localize ID="Caption" runat="server" Text="Categories"></asp:Localize>
</h1>
</div>
</div>
<div style="clear: both; margin-top: 6px;">
<asp:TreeView ID="CategoryTree" runat="server" EnableViewState="true" ExpandDepth="0" NodeWrap="True">
</asp:TreeView>
</div>

[compunerdy]

I am not sure the "correct" way to do it but I just put the file in my conlib directory and then modified threecolumn.master to use it in the left column.

[ForumsAdmin]

The code attached here for CategoryListEx control does not follow the code-behind approach so you do not have a separate CategoryListEx.ascx.cs file in which you were supposed to make the changes described earlier. However in the provided file you can add the following line to achieve the same.

Code: Select all

<%@ Implements Interface="CommerceBuilder.UI.ISidebarControl"  %>

[euroluxantiques]

Can you post a link to the example you're working on? I want to have a drop-down nested category using CSS and SimpleCategory conlib, but I haven't been able to figure out how to do this since the code in Gold changed. I want to see if what you've got going on could help me out if I change it a little bit. I would like my categories to be horizontal across the top nav bar with nested sub-categories for all categories. Thanks!

[compunerdy]

With the code Maz posted the treeview is double spaced and the images do not align with the text.. anyone figure out how to correct that?

Nevermind.. I think it is something in my CSS causing this.

[compunerdy]

The code attached here for CategoryListEx control does not follow the code-behind approach so you do not have a separate CategoryListEx.ascx.cs file in which you were supposed to make the changes described earlier. However in the provided file you can add the following line to achieve the same.

Code: Select all

<%@ Implements Interface="CommerceBuilder.UI.ISidebarControl"  %>

Are you sure this works because I tried it and it will not show up.. I had to add the control manually by editing the layout files.

[calvis]

I've try putting in the <%@ Implements Interface="CommerceBuilder.UI.ISidebarControl" %> code in as well in 2 different files. The CategoryListEx file and in another custom sidebar control which does not use the code behind approach and both are not showing up in the layout control list. I would much rather have it show up in the list than have to edit the master file. Any help would be appreciated.

The code attached here for CategoryListEx control does not follow the code-behind approach so you do not have a separate CategoryListEx.ascx.cs file in which you were supposed to make the changes described earlier. However in the provided file you can add the following line to achieve the same.

Code: Select all

<%@ Implements Interface="CommerceBuilder.UI.ISidebarControl"  %>

Are you sure this works because I tried it and it will not show up.. I had to add the control manually by editing the layout files.

[compunerdy]

Until we know how to do it correctly here is how I modified the layout file in order for it to show on my 3 column layout. Pretty sure all I did was renamed the standardcategorylist (whatever it is called) to say CategoryListEx instead.

Code: Select all

<%-- This file is a generated file. Do not modify. See customization guide for details. --%>
<%@ Master Language="C#" AutoEventWireup="true" MasterPageFile="~/Layouts/Base.Master" Inherits="AbleCommerce.Layouts.Base" %>
<%--
<layout>
<description>Layout having a main column and left and right side bars.</description>
</layout>
--%>
<%@ Register src="~/ConLib/StoreHeader.ascx" tagname="StoreHeader" tagprefix="uc" %>
<%@ Register src="~/ConLib/MiniBasket.ascx" tagname="MiniBasket" tagprefix="uc" %>
<%@ Register src="~/ConLib/CategoryListEx.ascx" tagname="CategoryListEx" tagprefix="uc" %>
<%@ Register src="~/ConLib/StoreFooter.ascx" tagname="StoreFooter" tagprefix="uc" %>
<asp:Content ID="Content1" ContentPlaceHolderID="NestedMaster" runat="server">
    <div id="header">
        <div class="zone">
            <div class="section">
                <div class="content">
                    <asp:ContentPlaceHolder ID="PageHeader" runat="server">
                        <uc:StoreHeader ID="StoreHeader_H" runat="server" />
                    </asp:ContentPlaceHolder>
                </div>
            </div>
        </div>
    </div>
<div id="contentContainer">
        <div id="leftColumn">
        <div class="zone">
            <asp:ContentPlaceHolder ID="LeftSidebar" runat="server">
                <uc:CategoryListEx ID="CategoryListEx" runat="server" />
            </asp:ContentPlaceHolder>
        </div>
    </div>
    <div id="mainColumn" class="threeColumnLayout">
        <div class="zone">
            <asp:ContentPlaceHolder ID="PageContent" runat="server">
                [page body]
            </asp:ContentPlaceHolder>
        </div>
    </div>
    <div id="rightColumn">
        <div class="zone">
            <asp:ContentPlaceHolder ID="RightSidebar" runat="server">
                <uc:MiniBasket ID="MiniBasket_Right" runat="server" ShowAlternateControl="True" AlternateControl="WhatsNewDialog.ascx" />
            </asp:ContentPlaceHolder>
        </div>
    </div>
    </div>
<div id="footer">
    <div class="zone">
        <div class="section">
            <div class="content">
                <asp:ContentPlaceHolder ID="PageFooter" runat="server">
                    <uc:StoreFooter ID="StoreFooter_F" runat="server" />
                </asp:ContentPlaceHolder>
            </div>
        </div>
    </div>
</div>
</asp:Content>

[calvis]

OK, got it working with the code. Thanks

[compunerdy]

Here are the files setup to load correctly like the other sidebars. I based this off the customhtml conlib.

categoryextended.ascx

Code: Select all

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="categoryextended.ascx.cs" Inherits="AbleCommerce.ConLib.CustomHTML" %>
<%--
<conlib>
<summary>This control helps you place custom HTML in sidebar.</summary>
<param name="Caption" default="Sample Header Text">Caption / Title of the control.</param>
<param name="WebPageId" default="-1">The id of the web page to load custom HTML in sidebar panel.</param>
</conlib>
--%>

<script runat="server">



    
    int _CategoryId;
    protected void Page_Load(object sender, EventArgs e)
    {
        _CategoryId = AbleCommerce.Code.PageHelper.GetCategoryId();
        if (!Page.IsPostBack)
            PopulateTree();
        ExpandSelectedPath();
    }

    private void PopulateTree() 
    {
        CategoryTree.Nodes.Clear();
        IList<Category> children = CategoryDataSource.LoadForParent(0, true);
        foreach (Category child in children)
        {
            TreeNode newNode = new TreeNode();
            newNode.Text = child.Name;
            newNode.Value = child.Id.ToString();
            newNode.NavigateUrl = child.NavigateUrl;
            if (CategoryDataSource.CountForParent(child.Id) > 0)
                PopulateTreeNode(newNode, child.Id);
            CategoryTree.Nodes.Add(newNode);
        }
        CategoryTree.DataBind();
    }
    private void PopulateTreeNode(TreeNode parentNode,int categoryId)
    {
        IList<Category> children = CategoryDataSource.LoadForParent(categoryId, true);
        foreach (Category child in children)
        {
            TreeNode newNode = new TreeNode();
            newNode.Text = child.Name;
            newNode.Value = child.Id.ToString();
            if (CategoryDataSource.CountForParent(child.Id) > 1)
                PopulateTreeNode(newNode, child.Id);
            newNode.NavigateUrl = child.NavigateUrl;
            parentNode.ChildNodes.Add(newNode);
        }
    }

    private void ExpandSelectedPath()
    {
        IList<CatalogPathNode> path = CatalogDataSource.GetPath(_CategoryId, true);
        StringBuilder valuePath = new StringBuilder();
        foreach (CatalogPathNode pathNode in path)
        {
            if (pathNode.CatalogNodeId == 0)
                continue;
            if (valuePath.Length > 0) valuePath.Append(CategoryTree.PathSeparator);
            valuePath.Append(pathNode.CatalogNodeId);
            TreeNode treeNode = CategoryTree.FindNode(valuePath.ToString());
            treeNode.Selected = true;
            treeNode.Expand();
        }
    }
    
</script>






<div class="widget customHtml">
    <div class="innerSection">
 	  <div class="header">
 	    <h2><asp:Localize ID="CaptionLabel" runat="server" Text="Categories"></asp:Localize></h2>
 	  </div>
 	  <div class="content">
	    <asp:PlaceHolder ID="CustomHTMLPanel" runat="server">  
             


<asp:TreeView ID="CategoryTree" runat="server" EnableViewState="true" ExpandDepth="0" NodeWrap="True"  ImageSet="simple" showlines="false" >
</asp:TreeView>  




	    </asp:PlaceHolder>
	  </div>
    </div>
</div> 

categoryextended.ascx.cs

Code: Select all

namespace AbleCommerce.ConLib
{
    using System;
    using CommerceBuilder.UI;
    using System.ComponentModel;
    using System.Web.UI.WebControls.WebParts;
    using CommerceBuilder.Catalog;
    using System.Web.UI;

    public partial class CustomHTML : System.Web.UI.UserControl, ISidebarControl
    {
        private int _WebPageId = -1;
        private string _Caption;
        private Webpage _Webpage;

        [Personalizable(), WebBrowsable()]
        [Browsable(true), DefaultValue("Sample Header Text")]
        [Description("The caption / title of the control")]
        public string Caption
        {
            get { return _Caption; }
            set { _Caption = value; }
        }

        [Personalizable(), WebBrowsable()]
        [Browsable(true), DefaultValue(-1)]
        [Description("The id of the web page to load custom HTML in sidebar panel.")]
        public int WebPageId
        {
            get { return _WebPageId; }
            set { _WebPageId = value; }
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!string.IsNullOrEmpty(this.Caption)) CaptionLabel.Text = this.Caption;
            if (_WebPageId > 0) _Webpage = WebpageDataSource.Load(_WebPageId);
            if (_Webpage != null && !string.IsNullOrEmpty(_Webpage.Description))
            {
                CustomHTMLPanel.Controls.Clear();
                CustomHTMLPanel.Controls.Add(new LiteralControl(_Webpage.Description));
            }
        }
    }
}

[calvis]

OK thanks for the update.

[compunerdy]

Anyone using this Gold version of treeview? I am having a issue with it even after reverting back to Maz original code. It works fine with browsing the store but direct links give this error.

Code: Select all

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:

Line 64:             valuePath.Append(pathNode.CatalogNodeId);
Line 65:             TreeNode treeNode = CategoryTree.FindNode(valuePath.ToString());
Line 66:             treeNode.Selected = true;
Line 67:             treeNode.Expand();
Line 68:         }


Source File: c:\sites\ACG11\ConLib\categoryextended.ascx    Line: 66

Stack Trace:

[NullReferenceException: Object reference not set to an instance of an object.]
   ASP.conlib_categoryextended_ascx.ExpandSelectedPath() in c:\sites\ACG11\ConLib\categoryextended.ascx:66
   ASP.conlib_categoryextended_ascx.Page_Load(Object sender, EventArgs e) in c:\sites\ACG11\ConLib\categoryextended.ascx:21
   System.Web.UI.Control.LoadRecursive() +70
   System.Web.UI.Control.LoadRecursive() +189
   System.Web.UI.Control.LoadRecursive() +189
   System.Web.UI.Control.LoadRecursive() +189
   System.Web.UI.Control.LoadRecursive() +189
   System.Web.UI.Control.LoadRecursive() +189
   System.Web.UI.Control.LoadRecursive() +189
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +3177

[compunerdy]

Figured out my issue..

The code Maz posted will throw a server error if you link to a product that has multiple categories and one of those categories is hidden. It may be only if the product was originally created under a category that is now hidden.

[mazhar]

Figured out my issue..

The code Maz posted will throw a server error if you link to a product that has multiple categories and one of those categories is hidden. It may be only if the product was originally created under a category that is now hidden.

The problem happens when we try to expand the tree view. For hidden categories the direct link works but since tree view is only loading public categories it fails to find the suitable one to expand when category being seen is hidden. The fix is very easy. Locate following code at the very end of the file in ExpandSelectedPath

Code: Select all

treeNode.Selected = true;
treeNode.Expand();

and wrap this inside a not null check like this

Code: Select all

if (treeNode != null)
                {
                    treeNode.Selected = true;
                    treeNode.Expand();
                }

[compunerdy]

Thanks Maz

[fiddycent]

Hi,

I implemented this control and it's working very nicely. In addition to adding it to the Category page layout, I also added it as a control to my Product page layout. For some reason on the product pages only, it won't let me expand and retract the menu (by clicking on the plus and minus buttons). It's frozen in place when first loaded. It works fine on the category pages. What would be causing this issue?

Thanks!

[mazhar]

Do you notice any errors in Administration -> Help -> Error Log page while you play with control on product page? Does it happen for all products or products under a certain category?

[fiddycent]

Do you notice any errors in Administration -> Help -> Error Log page while you play with control on product page? Does it happen for all products or products under a certain category?

Nothing in the error log. It happens on all product pages but works fine on other pages. I've also tried it on all browsers. I don't know if this helps, but when I debugged it in Chrome and clicked on it, it treats it as a FocusEvent whereas on the other pages it treats it as a MouseEvent and executes the javascript command just fine. I'm not sure where to begin debugging this otherwise.

[fiddycent]

Another unrelated issue I was running into with this control. I have a few categories that have single child categories (for now). It was not showing these single child categories in my tree, so I changed the quantity on this line from 1 to 0 and it looks to be working now. Note this is in the PopulateTreeNode method, not the PopulateTree method.

Code: Select all

if (CategoryDataSource.CountForParent(child.Id) > 1)