ComponentArt CategoryTreeView - How to tweak it

Store UI, layout, design, look and feel; Discussion on the customer facing pages of your online store. Cascading Style Sheets, Themes, Scriptlets, NVelocity and the components in the ConLib directory.
Post Reply
Odettes
Lieutenant Commander (LCDR)
Lieutenant Commander (LCDR)
Posts: 102
Joined: Wed Apr 02, 2008 11:00 am
Location: Stockholm, Sweden
Contact:

ComponentArt CategoryTreeView - How to tweak it

Post by Odettes » Wed May 14, 2008 9:34 am

Hi!

I have read on this forum a couple of "how to" implement the ComponentArt CategoryTreeView and it works.
My problem is that no mather how I try to modify the different parameters I cant get it to look like this "Bare Bones" version I want:
http://www.componentart.com/webui/demos ... Form1.aspx

In my installations of Able 7 (latest build) i allready have a image folder with all the images (App_themes/images/ComponentArt/TreeView/lines), I just don't now how to modify the parameters correct. Or do I need something else?

Anyone who can give me some tips how to modify this code to make it look like the example link above?

Best regards, Thomas

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">
    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.SelectedNodeCssClass = "CatSelectedTreeNode"; 
        TreeView1.HoverNodeCssClass = "CatHoverTreeNode";

        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"
            DragAndDropEnabled="false" 
            NodeEditingEnabled="false"
            KeyboardEnabled="true"
            CssClass="CatTreeView" 
            NodeCssClass="CatTreeNode" 
            SelectedNodeCssClass="CatSelectedTreeNode" 
            HoverNodeCssClass="CatHoverTreeNode"
            DefaultImageWidth="16" 
            DefaultImageHeight="16"
            ExpandCollapseImageWidth="15"
            ExpandCollapseImageHeight="15"
            NodeIndent="16"
            ItemSpacing="3" 
            NodeLabelPadding="3"
            CollapseImageUrl="exp.gif"
            ExpandImageUrl="col.gif"
            ParentNodeImageUrl="folders.gif" 
            LeafNodeImageUrl="folder.gif" 
            ShowLines="false" 
            EnableViewState="false"
            runat="server">
            <Templates>
                <ComponentArt:NavigationCustomTemplate id="SelectedCategoryTemplate">
                    <Template>
                        <b><%# DataBinder.Eval(Container.DataItem, "Text") %></b>
                    </Template>
                </ComponentArt:NavigationCustomTemplate>
            </Templates>
        </ComponentArt:TreeView> 
    </asp:Panel>
</asp:Panel>
Sincerely,
Thomas Berglund

https://traileronline.se
AbleCommerce Gold R11 Custom

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

Re: ComponentArt CategoryTreeView - How to tweak it

Post by jmestep » Wed May 14, 2008 11:58 am

You would need to put styles in your style.css to change those features. Also, if you have the componetart.css in the folder for theme you are using, you might have to delete that. I had to delete it for a tabbed product display to pick up my styles, but not for the tree view. Here is what I am using for style on http://www.gravesitemasters.com.

Code: Select all

.CatTreeView
{
   padding-top:4px;
   padding-left:1px;
   border: #7C7C94 0px solid;
   cursor:default;
   width:210px;
   
}

.CatTreeNode
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   padding-top:2px;
   padding-bottom:1px;
   padding-left: 3px;
   padding-right: 3px;
   color:RGB(0,51,153);
   
   
   
}

.CatGrayedTreeNode
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   padding-top:2px;
   padding-bottom:1px;
   padding-left: 3px;
   padding-right: 3px;
   color:RGB(108,84,128);
   cursor:default;
}

.CatHoverTreeNode
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   text-decoration:none;
   padding-top:2px;
   padding-bottom:1px;
   padding-left: 3px;
   padding-right: 3px;
   cursor: default;
   color:RGB(108,84,128);
}

.CatSelectedTreeNode
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   background-color: RGB(231,223,232);
   color:RGB(173,163,196);
   padding-top:2px;
   padding-bottom:1px;
   padding-left: 3px;
   padding-right: 3px;
   cursor: default;
}

If you want the + and lines, you might be able to use the one from the admin/catalog/categorytree.ascx. In that one if the category names are too long, they wrap around. In the other one, they don't.
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

Odettes
Lieutenant Commander (LCDR)
Lieutenant Commander (LCDR)
Posts: 102
Joined: Wed Apr 02, 2008 11:00 am
Location: Stockholm, Sweden
Contact:

Re: ComponentArt CategoryTreeView - How to tweak it

Post by Odettes » Thu May 15, 2008 3:14 am

Hi Judy!

Thanks for the tips about the Admin/Catolg/CategoryTree.ascx, I took a copy and put it in the Conlib/Custom folder.
The menues shows upp, but when I try to clik at them the follwoing error shows up:
What do I do wrong?

Best regards, Thomas

Code: Select all

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: 


Line 133:    protected void PopulateChildCategories(TreeNode node)
Line 134:    {
Line 135:        if (node.ChildNodes.Count == 0)
Line 136:        {
Line 137:            int parentCategoryId = AlwaysConvert.ToInt(node.Value);
 

Source File: c:\Odettes\ConLib\Custom\CategoryTree.ascx    Line: 135 

Stack Trace: 


[NullReferenceException: Object reference not set to an instance of an object.]
   ASP.CatalogTree.PopulateChildCategories(TreeNode node) in c:\Odettes\ConLib\Custom\CategoryTree.ascx:135
   ASP.CatalogTree.CategoryTreeView_SelectedNodeChanged(Object sender, EventArgs e) in c:\Odettes\ConLib\Custom\CategoryTree.ascx:161
   System.Web.UI.WebControls.TreeView.OnSelectedNodeChanged(EventArgs e) +105
   System.Web.UI.WebControls.TreeView.RaisePostBackEvent(String eventArgument) +724
   System.Web.UI.WebControls.TreeView.System.Web.UI.IPostBackEventHandler.RaisePostBackEvent(String eventArgument) +7
   System.Web.UI.Page.RaisePostBackEvent(IPostBackEventHandler sourceControl, String eventArgument) +11
   System.Web.UI.Page.RaisePostBackEvent(NameValueCollection postData) +177
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1746

 


--------------------------------------------------------------------------------
Version Information: Microsoft .NET Framework Version:2.0.50727.1433; ASP.NET Version:2.0.50727.1433 
Sincerely,
Thomas Berglund

https://traileronline.se
AbleCommerce Gold R11 Custom

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

Re: ComponentArt CategoryTreeView - How to tweak it

Post by jmestep » Thu May 15, 2008 9:32 am

Well, I just don't know. I haven't actually used that one on the store side.
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: ComponentArt CategoryTreeView - How to tweak it

Post by Jinx » Tue Jun 03, 2008 2:34 pm

Anyone know how to just style the child menu items separately from the main category styles?

Post Reply