+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Custom RadTreeView control

Custom RadTreeView control

4 posts, 0 answered
  1. Liam
    Liam avatar
    18 posts
    Registered:
    30 Jun 2010
    01 Oct 2010
    Link to this post

    Hi,


    I am developing a custom RadTreeView control that will be used as a navigation menu. I have two issues:

     

    1. I want to remove the default classes RadTreeView RadTreeView_Default. I realise I can set EnableEmbeddedBaseStylesheet and EnableEmbeddedSkins to false however that only removes the links to those stylesheets from the head. The classes are still rendered out on the containing div of the html for the treeview. That is, the containing div of the treeview still has class="RadTreeView RadTreeView_Default". How can I remove that? Ideally I want to remove those classes server side, not in a client side script.

     

    2. I'm using load-on-demand for my custom treeview. A node that has children (in the SiteMap) has its ExpandMode property set to TreeNodeExpandMode.ServerSideCallBack and nodes are collapsed by default.

    The exception however, is if the current page corresponds to a child node. In that case I add appropriate child treenodes and I want to expand all the parent nodes. I do this by setting the Expanded property of the current node's parent nodes to true. This issue I have it that while this approach mostly works I find that the parent nodes are rendered out with <span class="rtPlus"></span> instead of <span class="rtMinus"></span>. So while the parent is expanded, the image is showing a 'plus' instead of a 'minus'. I would have expected setting Expanded to true would cause the node to be rendered with <span class="rtMinus"></span>.


    Regards,

    Liam

  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    06 Oct 2010
    Link to this post
    Hello Liam,

    1. If you remove embedded styles and scripts the control will stop working properly. There are minimum scripts and styles required by the control. Embedded resources can be disable when you have similar scripts which you want to use with your control or you have extended the logic of the default scripts. The easiest way to remove the class value is creating a custom control that inherits from RadTreeView and there you can override CssClassFormatString property. It has a get accessor where you can return empty string or some other value.

    2. I checked the css classes set for the span tags on our demo and all classes are correct - when the node is expanded the css class is "rtMinus". When the node is collapsed the css class is "rtPlus". The class is set through RadTreeNode.js, so if you have disabled the scripts there could be some changes to the control behavior.

    Kind regards,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of thttp://admin.telerik.com/?Context=Support&Control=~/UserControls/Support/ThreadReply.ascx&ST=353345&SM=0he items
  3. Liam
    Liam avatar
    18 posts
    Registered:
    30 Jun 2010
    08 Oct 2010
    Link to this post
    Hi Ivan,

    Thanks for your reply.

    1. Yes, my custom RadTreeView is actually  made from a custom class that inherits from RadTreeView so your solution of overriding the CssClassFormatString property works well.

    2. I did find a solution to getting the appropriate nodes expanded with the minus showing. I can add a class to a parent node of the current node and add a script to the page that does the following:
    $("div.AncestorOfCurrentNode > span.rtPlus").removeClass("rtPlus").addClass("rtMinus");

    Where "AncestorOfCurrentNode" is the special class that I have added. While this does work I would have preferred a completely server side approach.

    To give an example, I also separately use a more standard TreeView control for a sitemap control. It is populated by setting its DataSource property to be an appropriate SiteMapNodeCollection calling DataBind() and then calling ExpandAllNodes() like so:
    SiteMapNodeCollection _siteMapNodes = new SiteMapNodeCollection(_home);
    _siteMapTreeview.DataSource = _siteMapNodes;
    _siteMapTreeview.DataBind();
    _siteMapTreeview.ExpandAllNodes();
    Where _home is a SiteMapNode that is the home node for the site. This approach results with the TreeView fully expanded with 'minuses' correctly showing for expanded nodes.

    The difference with my custom menu RadTreeView is that instead of setting a DataSource I manually populate the minimum set of nodes required to show the menu for the current page. The code for the construction of the menu looks like the following:
    protected override void OnInit( EventArgs e )
    {
       base.OnInit(e);
     
       // Get the home node
       SiteMapNode _home = ( (CustomMasterPage)this.Page.Master ).Home;
        
       // Only attempt operation if _home not null
       if( _home!=null )
       {
          SiteMapNodeCollection _siteMapNodes = SiteMap.Provider.GetChildNodes(_home);
     
          this.NodeExpand += new RadTreeViewEventHandler(TreeviewMenu_NodeExpand);
           
          LoadTreeNodes(this.Nodes, _siteMapNodes);
     
          // Don't use embedded skins or styles
          this.EnableEmbeddedBaseStylesheet = false;
          this.EnableEmbeddedSkins = false;
          this.CssClass = "leftMenu";
     
          this.ExpandAllNodes();
       }
    }
     
    private void LoadTreeNodes( RadTreeNodeCollection treeNodes_, SiteMapNodeCollection nodes_ )
    {
       foreach( SiteMapNode _node in nodes_ )
       {
          RadTreeNode _treeNode = new RadTreeNode();
          _treeNode.Text = _node.Title;
          _treeNode.NavigateUrl = _node.Url;
     
          if( _node.HasChildNodes )
          {
             _treeNode.ExpandMode = TreeNodeExpandMode.ServerSideCallBack;
     
             if( SiteMap.CurrentNode.IsDescendantOf(_node) )
             {
                // add the child tree nodes down to the current sitemapnode
                LoadTreeNodes(_treeNode.Nodes, SiteMap.Provider.GetChildNodes(_node));
                // Add special class to this node
                _treeNode.ContentCssClass = "AncestorOfCurrentNode";
             }
          }
     
          if( _treeNode.NavigateUrl.Equals(SiteMap.CurrentNode.Url) )
          {
             _treeNode.Selected = true;
          }
     
          treeNodes_.Add(_treeNode);
       }
    }
    And my experience is that while the appropriate nodes are expanded, they have the plus next to them rather than the minus.

    Thanks for your help.

    Regards,
    Liam
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    08 Oct 2010
    Link to this post
    Hello Liam,

    The RadTreeView automatically should handle when the node is expanded or not depending on the SiteMapNode Parent item, so it is better to use the base functionality to avoid such issues.
    Inside the RadTreeView class there is a method RenderContents which you can override and set the rtMinus and rtPlus by using HtmlTextWriterAttribute.Class

    private void RenderCustomAtributes(HtmlTextWriter writer)
        {
             
        writer.AddAttribute(HtmlTextWriterAttribute.Class, "rtMinus");
            // do the same for rtPlus
     
            writer.RenderBeginTag(HtmlTextWriterTag.Span);
            writer.RenderEndTag();
        }


    All the best,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Register for webinar
4 posts, 0 answered