More in this section

Forums / Developing with Sitefinity / Question About Blog CategoryTree

Question About Blog CategoryTree

4 posts, 0 answered
  1. Brian
    Brian avatar
    31 posts
    Registered:
    25 Jun 2009
    11 Jul 2009
    Link to this post
    I have setup a blog within Sitefinity with a CategoryTree to display the categories within the blog.  All is working well.  I have many top level categories with sub categories under them.  I have two questions / problems:

    1.   My problem is that when I click a sub category I would like the tree to remain expanded displaying the sub category that I just clicked while collapsing all the other main categories that are not within the path of my current sub category.  In my CategoryTree I found the RadTreeView section.  Under that I clicked edit for the CategoriesTreeView.  In the CategoriesTreeView window under the Behavior section I saw the setting "SingleExpandPath" & set that to true.  This didn't seem to make a difference & I'm not sure it should have.  Could someone point me in the right direction as to how to make this happen?

    2. I would like to have a header section at the top of my page that displays the current category name that was just clikced.  So if you clicked the "Cheerleader" category it would display "Cheerleader" in the header section.  If you clicked "Football" it would display "Football" in the header.  Basically, how can I determine what category was clicked so I can display the correct category name in the header for that page?

    As you can tell I'm working on a sports related site.

    I hope all this makes sense & thanks again for any help!

    Brian
  2. Nikolai
    Nikolai avatar
    216 posts
    Registered:
    01 Jun 2017
    13 Jul 2009
    Link to this post
    Hi Brian,

    About your first question:

    There seems to be a problem with setting the RadTreeView's "SingleExpandPath" from Sitefinity. What you can do is open "~\Sitefinity\ControlTemplates\Generic_Content\CategoriesTree.ascx" and add this property manually so the control will look like this:

    <%@ Control Language="C#" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <h3> 
        <asp:Literal ID="controlTitle" runat="server"></asp:Literal> 
    </h3> 
     
    <telerik:RadTreeView ID="categoriesTreeView" runat="server" SingleExpandPath="true">  
    </telerik:RadTreeView> 
     

    Also in order to achieve the effect you describe the "ExpandAllNodesByDefault" property should be set to false. You can do this through control designer.

    About your second question:

    I assume that when you click on the RadTreeView node you remain on the same page. So here is a simple way to get the clicked node with Javascript:

     1. Add OnClientNodeClicked="ClientNodeClicked" to the RadTreeView from the Template file.
     2. Use this JS code to handle the event:

    <script type="text/javascript">  
        function ClientNodeClicked(sender, eventArgs) {  
            var node = eventArgs.get_node();  
            alert("You clicked " + node.get_text());    }  
    </script> 

    Basically the whole control template should look like this:

    <%@ Control Language="C#" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <h3> 
        <asp:Literal ID="controlTitle" runat="server"></asp:Literal> 
    </h3> 
     
    <telerik:RadTreeView ID="categoriesTreeView" runat="server" SingleExpandPath="true" OnClientNodeClicked="ClientNodeClicked">  
    </telerik:RadTreeView> 
     
    <script type="text/javascript">  
        function ClientNodeClicked(sender, eventArgs) {  
            var node = eventArgs.get_node();  
            alert("You clicked " + node.get_text());    }  
    </script> 

    From here you can change the JS code to set the clicked node value. I hope this helps.

    Greetings,
    Nikolai
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Brian
    Brian avatar
    31 posts
    Registered:
    25 Jun 2009
    13 Jul 2009
    Link to this post
    Thanks Nikolai,

    The JS solution for capturing the category name worked perfect...... Thanks again!

    I'm still having a problem with the SingleExpandPath property on the RadTreeView.  I set the property to true in the template file & the "ExpandAllNodesByDefault" property is set to false from the control panel.  The menu still colapses all items including the path of the category I'm currently in?

    Should there be another property that I need to set?

    Thanks,

    Brian
  4. Nikolai
    Nikolai avatar
    216 posts
    Registered:
    01 Jun 2017
    14 Jul 2009
    Link to this post
    Hello Brian,

    Here I think this might help you achieve the desired effect. You need to modify "~\Sitefinity\ControlTemplates\Generic_Content\CategoriesTree.ascx" template.

    The whole template should look like this:

    <%@ Control Language="C#" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <h3> 
        <asp:Literal ID="controlTitle" runat="server"></asp:Literal> 
    </h3> 
     
    <telerik:RadTreeView ID="categoriesTreeView" runat="server" SingleExpandPath="true" OnClientNodeClicked="ClientNodeClicked" EnableViewState="true" OnClientLoad="GetSelectedNodes">  
    </telerik:RadTreeView> 
     
    <script type="text/javascript">  
        function ClientNodeClicked(sender, eventArgs) {  
            var node = eventArgs.get_node();  
            alert("You clicked " + node.get_text());  
        }  
     
        function GetSelectedNodes() {  
            var tree = $find("<%= categoriesTreeView.ClientID %>");  
            var nodes = tree.get_selectedNodes();  
            for (var i = 0; i < nodes.length; i++) {  
                var parent = nodes[i].get_parent();                        
                  
                 while(parent != null)  
                 {  
                  if (parent.expand)  
                  {  
                   parent.expand();  
                  }  
                    
                   parent = parent.get_parent();  
                 }              
     
                  
            }  
        }           
    </script> 

    As you can see I added another JS function to collapse selected node's path in the "OnCliendLoad" event. Also do not forget to set  EnableViewState="true".

    All the best,
    Nikolai
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Register for webinar
4 posts, 0 answered