making a node non expandable/collapsible

8 posts, 0 answers
  1. Ken Payson
    Ken Payson avatar
    6 posts
    Member since:
    Jul 2008

    Posted 20 Feb 2009 Link to this post

    I have a tree where the nodes can be expanded/collpsed.  (This is done client side)  I would like it if the root of the tree was not expandable/collapsible.  Is it possible to remove the expand/collapse triangle next to the root, but keep all of the other nodes the same?

    Thanks,
    Ken
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 23 Feb 2009 Link to this post

    Hi Ken,

    I tried the code below to set root node as not expandable/collapsible while the other node having these facilities. Hope this help you.

    ASPX:
    <telerik:RadTreeView ID="RadTreeView1"  Runat="server" OnClientNodeExpanding="check" OnClientNodeCollapsing="check"
        <Nodes> 
            <telerik:RadTreeNode runat="server" Text="Root"
                <Nodes> 
                    <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">                 
                        <Nodes> 
                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1"
                            </telerik:RadTreeNode> 
                        </Nodes> 
                    </telerik:RadTreeNode> 
                </Nodes> 
            </telerik:RadTreeNode> 
        </Nodes> 
    </telerik:RadTreeView> 

    JavaScript:
    <script type="text/javascript"
    function check(sender, args) 
        if (args.get_node().get_level()==0) 
        args.set_cancel(true); 
    function pageLoad() 
        var tree = $find("<%= RadTreeView1.ClientID %>"); 
        var node = tree.findNodeByText("Root"); 
        node.expand(); 
    </script> 

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. İlter
    İlter avatar
    19 posts
    Member since:
    Feb 2013

    Posted 12 Dec 2013 Link to this post

    Hi,

    That code works as needed. Also, RadTreeView would have a better look if the +, - images on the left side of that root node, could be disappeared. Is there a way to accomplish that scenario?

    Thanks!
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 13 Dec 2013 Link to this post

    Hi İlter,

    To remove the plus and minus sign with the RadTreeView control you can use the following css class selector:
    div.RadTreeView_Silk .rtPlus,
    div.RadTreeView_Silk .rtMinus {
        background-image: none;
    }

    Note that if you are not using the Silk skin you will need to change the name of the selector and set the name of the skin that you currently use instead.

    Regards,
    Kate
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. İlter
    İlter avatar
    19 posts
    Member since:
    Feb 2013

    Posted 13 Dec 2013 Link to this post

    Thanks for the quick response!

    Actually, that code removes all the +, - images on the treeview. What I meant was the parent node's collapse - expand image as it won't work and just show after implementing Shinu's code sample. I accomplished that by using Shinu's another code in that question. That code removes the image after the DOM is ready, thus, image can be seen for a second until the page loads completely. I am guessing there is no way to accomplish that ona from server side, right? :)
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 13 Dec 2013 Link to this post

    Hello İlter,

    You can set a css class from code behind and apply the needed settings whenever this class is set to the desired node. Below you can find the needed code and styles so you can achieve the desired functionality and look:
    RadTreeView1.FindNodeByText("node1").ContentCssClass = "newClass";

    styles:
    <style>
           .RadTreeView_Sunset div.newClass .rtPlus,
            .RadTreeView_Sunset div.newClass .rtMinus .new {
               background-image: none;
           }
       </style>

    Regards,
    Kate
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  8. İlter
    İlter avatar
    19 posts
    Member since:
    Feb 2013

    Posted 13 Dec 2013 Link to this post

    Thanks, that one works as I want :)
    With a minor change, though...
    I couldn't understand why the ".new" at the end of the

    .RadTreeView_Sunset div.newClass .rtMinus .new

    line does. So, I removed it and it's working like a charm now. Is that "new" class is a typo, or it has a special meaning in there?

    Thanks again for pointing me to the right direction!
  9. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 16 Dec 2013 Link to this post

    Hi İlter,

    Thank you for the interest. Indeed as you noticed the .new css class does not really have a special purpose and it is rather a typo in the css class selector. What does make the difference is the .newClass  class.

    Regards,
    Kate
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017