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

Forums / Designing with Sitefinity / Site TreeView Customization

Site TreeView Customization

12 posts, 0 answered
  1. Chris Schrader
    Chris Schrader avatar
    14 posts
    Registered:
    19 Feb 2010
    25 Mar 2010
    Link to this post
    I am trying to customize the Site TreeView control, and was wondering if it is possible to have the default state be expanded instead of having to expand the top level item to view the others?

    Also, I see that you reference this directory  \[YourProject]\RadControls\ multiple times in these threads, but we don't seem to have that. Is there something that we have to do to add that to our projects?
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    26 Mar 2010
    Link to this post
    Hello Chris Schrader,

    I am trying to customize the Site TreeView control, and was wondering if it is possible to have the default state be expanded instead of having to expand the top level item to view the others?


    You can call RadTreeview1.ExpandAllNodes(); method on Page_Load. This will expand all items.

    Also, I see that you reference this directory  \[YourProject]\RadControls\ multiple times in these threads, but we don't seem to have that. Is there something that we have to do to add that to our projects?

    All controls are embedded into Telerik.Web.UI.dll. Most probably you have seen some older posts.

    Sincerely yours,
    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.
  3. Chris Schrader
    Chris Schrader avatar
    14 posts
    Registered:
    19 Feb 2010
    30 Mar 2010
    Link to this post
    Got the menu to be fully expanded, thank you. Next thing, is there a way to remove the plus-minus images on the menu?
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    30 Mar 2010
    Link to this post
    Hello Chris Schrader,

    The easiest way to do this is using rtPlus and rtMinus file skin selectors and remove the sprite image

    .RadTreeView_Default .rtPlus, .RadTreeView_Default .rtMinus
    {
        background-image: none !important;
    }


    Best wishes,
    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.
  5. Chris Schrader
    Chris Schrader avatar
    14 posts
    Registered:
    19 Feb 2010
    31 Mar 2010
    Link to this post
    thank you. these are my last two issues:

    1) Is it possible to take the border off of the menu items that appears on hover and option selected? I didn't see a css property that was controlling this.

    2) Is it possible to change the color of the top 'group' link? I want 'General Information' to be a different color than it's sub pages.

    I attached an image so you can see what I mean.
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    01 Apr 2010
    Link to this post
    Hello Chris Schrader,

    1. To remove the border you can use the rule below

    .RadTreeView .rtIn
    {
        border: 0 !important;
        background: [color] !important;
    }


    2. You can apply custom css class to the desired node

    <script type="text/javascript">
        function onLoad(sender, eventArgs) {
            var node = sender.findNodeByText("NameOfTheNode");
            alert(node.get_text());
            node.set_cssClass(".customCss");
        }
     
    </script>
     
    <asp:SiteMapDataSource ID="SitemapDataSource1" runat="server" ShowStartingNode="false" />
    <telerik:RadTreeview OnClientLoad="onLoad" ID="RadTreeview1" runat="server" OnNodeDataBound="RadTreeview1_NodeBound" DataSourceID="SitemapDataSource1">
    </telerik:RadTreeview>


    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.
  7. Chris Schrader
    Chris Schrader avatar
    14 posts
    Registered:
    19 Feb 2010
    07 Apr 2010
    Link to this post
    What is the class name that i can use to single out the top 'group link' or node? I just want every group page to not be the same color as its sub links. I would also like to make the top group link disabled, so that it doesn't link to the first page of the group, is that possible?
  8. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    07 Apr 2010
    Link to this post
    Hi Chris Schrader,

    You can achieve this programmatically. There is no separate class used for Group pages. Group pages are Sitefinity's project implementation.

    below is some quick solution.

    protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            RadTreeview1.DataBind();
            // this will get only the rool linear nodes , to get all nodes use GetAllNodes()
            foreach (RadTreeNode node in RadTreeview1.Nodes)
            {
                if (node != null && node.Nodes.Count > 0)
                {
                    var siteMapNode = (CmsSiteMapNode)CmsSiteMap.Provider.FindSiteMapNode(node.Nodes[0].NavigateUrl);
                    if (siteMapNode.CmsPage.Parent.PageType == CmsPageType.Group)
                    {
                        // disable the group node
                        // you could also set the node Enabled=false
                        node.NavigateUrl = "";
                        // add css only to the group pages
                        node.CssClass = "someCssClassHere";
                    }
                }
            }
        }

    You can expose public property of type boolean to set whether the Group nodes should be disabled and property of type string about what css class to be set


    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 the items.
  9. Chris Schrader
    Chris Schrader avatar
    14 posts
    Registered:
    19 Feb 2010
    08 Apr 2010
    Link to this post
    I get the following error:

    The name 'CmsPageType' does not exist in the current context
  10. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    08 Apr 2010
    Link to this post
    Hi Chris Schrader,

    Have you added reference to CmsPageType? The intellisense should suggest the correct namespace

    Name: Telerik.Cms.CmsPageType
    Assembly: Telerik.Framework

    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 the items.
  11. Chris Schrader
    Chris Schrader avatar
    14 posts
    Registered:
    19 Feb 2010
    08 Apr 2010
    Link to this post
    Is there a way to make it so that by double clicking on the top node of my treeview, it doesn't collapse or expand the sub links?
  12. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    09 Apr 2010
    Link to this post
    Hello Chris Schrader,

    You could apply some css class over the node that will disable the click as a whole. All other server or client side methods will disable expand and collapse buttons as well.

    You may find this sample useful  Expand disabled node

    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 the items.
Register for webinar
12 posts, 0 answered