making a node non expandable/collapsible

[Ken Payson]

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

[Shinu]

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.

[İlter]

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!

[Kate]

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

[İlter]

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? :)

[Kate]

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

[İlter]

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!

[Kate]

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