Want to disable collapse in RadDropDownTree

1 Answer 88 Views
Ajax DropDownList TreeView
Clark
Top achievements
Rank 1
Iron
Iron
Clark asked on 19 Aug 2021, 08:52 PM | edited on 19 Aug 2021, 08:53 PM

Is there a way to completely disable collapsing of the RadDropDownTree control?

I want to be able to collapse and expand all the nodes, I just don't want users to be able to completely collapse the control.

In other words, I want to use it like RadTreeView but with the benefit of RadDropDownTree filtering.

Thanks!

--Clark

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Peter Milchev
Telerik team
answered on 24 Aug 2021, 01:07 PM | edited on 14 Sep 2021, 02:43 PM

Hello Clark,

**Update**

The original reply was addressing the collapse prevention of the nodes of the Embedded TreeView while the OP question is about preventing the collapse of the dropdown of the DropDownTree. Sharing the solution code from the comments for convenience:

To prevent the dropdown collapse, you can cancel the client event of the DropDownTree itself - OnClientDropDownClosing:

 

function OnClientDropDownClosing(sender, args) {
    // custom condition to decide if the dropdown should stay open
    if (true) {
        // prevent the dropdown close
        args.set_cancel(true)
    }
}

 

**End of Update**

You can use the OnClientNodeCollapsing event of the embedded TreeView and cancel it:

 

<script>
    function OnClientNodeCollapsing(sender, args) {
        args.set_cancel(true);
    }
</script>
<telerik:RadDropDownTree RenderMode="Lightweight" ID="RadDropDownTree1" runat="server" Width="350px" DefaultMessage="Select an entry from the list" EnableFiltering="true" 
    OnLoad="RadDropDownTree1_Load" OnNodeDataBound="RadDropDownTree1_NodeDataBound" >
    <DropDownSettings Width="350px" />
</telerik:RadDropDownTree>

 

 

protected void RadDropDownTree1_NodeDataBound(object sender, DropDownTreeNodeDataBoundEventArguments e)
{
    e.DropDownTreeNode.Expanded = true;
        
}

protected void RadDropDownTree1_Load(object sender, EventArgs e)
{
    (sender as RadDropDownTree).EmbeddedTree.OnClientNodeCollapsing = "OnClientNodeCollapsing";
}

 

Regards,
Peter Milchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Clark
Top achievements
Rank 1
Iron
Iron
commented on 24 Aug 2021, 03:50 PM

Hi Peter and thanks for your response.

First off I changed this line from:

(sender as RadDropDownTree).EmbeddedTree.OnClientNodeCollapsing = "OnClientNodeCollapsing";

To:

(sender as RadDropDownTree).RadDropDownTree1.EmbeddedTree.OnClientNodeCollapsing = "OnClientNodeCollapsing";

I then run it and I get this error on that same line:

 

Here is where the Script is:

Here is the Telerik RadDropDownTreecontrol:

Thanks for your help!

--Clark

 

Peter Milchev
Telerik team
commented on 25 Aug 2021, 11:52 AM

Hi Clark, the sender argument of the NodeDataBound handler is actually the control that fired the event. In this case, the RadDropDownTree that fired NodeDataBound is the sender but represented as an object, and that is why I cast it to a RadDropDownTree. 

In this specific case, "sender as RadDropDownTree" and "RadDropDownTree1" will be the same exact thing. The first approach gives the benefit of reusing the same handler for multiple RadDropDownTrees without having a specific reference in the handler itself. 

Clark
Top achievements
Rank 1
Iron
Iron
commented on 31 Aug 2021, 07:48 PM

Thanks Peter, can you tell me why I'm getting the error?

Also, when I try:

(sender as RadDropDownTree).EmbeddedTree.OnClientNodeCollapsing = "OnClientNodeCollapsing";

I get a red line under .EmbeddedTree indicating that it is an invalid method.  That's why I used:

(sender as RadDropDownTree).RadDropDownTree1.EmbeddedTree.OnClientNodeCollapsing = "OnClientNodeCollapsing";

where it is a valid method.

 

--Clark

Peter Milchev
Telerik team
commented on 03 Sep 2021, 08:09 AM

Hi Clark, it is important that the code I have shared is added to the Load event of the RadDropDownTree as that is when the sender would actually be the RadDropDownTree. 

On the other hand, if you have only a single DropDownTree, then you can replace the (sender as RadDropDownTree) with the direct reference to the control via its ID  RadDropDownTree1 similar to how you configure its data properties.

RadDropDownTree1.EmbeddedTree.OnClientNodeCollapsing = "OnClientNodeCollapsing";

Clark
Top achievements
Rank 1
Iron
Iron
commented on 08 Sep 2021, 04:10 PM

Hi Peter,

Thanks so much for taking the time to help me on this.  :-)

I just created a new clean project and now I'll apply your suggestions and see what happens.

Thanks again.,

--Clark

 

 

Clark
Top achievements
Rank 1
Iron
Iron
commented on 08 Sep 2021, 08:06 PM | edited

Hello Peter,

I configured it per your instructions and here is what's happening:

1.  The RadDropDownTree itself doesn't load expanded even after I added OpenDropDownOnLoad="true".  I want it to load expanded and display the primary nodes just like RadTreeView. 

2.  On load and when I expand the RadDropDownTree, the primary nodes automatically expand to reveal the secondary nodes and then once expanded I can't collapse the primary nodes.   I don't want the primary nodes to automatically expand and I want to be able to collapse and expand all nodes.   I want it to initially display the primary nodes just like a RadTreeView.

3.  I can collapse the entire RadDropDownTree.  The main point of this exercise is to not have the RadDropDownTree collapse.

Here is my aspx section:

 

<script> function OnClientNodeCollapsing(sender, args) { args.set_cancel(true); } </script><telerik:RadDropDownTree RenderMode="Lightweight" ID="RadDropDownTree1" runat="server" Width="350px" DefaultMessage="Select an entry from the list" EnableFiltering="true" OnLoad="RadDropDownTree1_Load" OnNodeDataBound="RadDropDownTree1_NodeDataBound" OnClientLoad="OnClientNodeCollapsing" ><DropDownSettings Width="350px" OpenDropDownOnLoad="true" /></telerik:RadDropDownTree>

 

Here is how I want it to load. I don't want to be able to collapse the control.

Here is what I want it to look like when I expand the nodes. I want to be able to expand and collapse all the nodes.

 

Peter Milchev
Telerik team
commented on 13 Sep 2021, 10:16 AM

Hi Clark, I am terribly sorry for misunderstanding, it seems you want to prevent the dropdown closing, not the treeview node collapse. 

If that is the case, then you can remove all the code above and just cancel the client event of the DropDownTree itself - OnClientDropDownClosing:

function OnClientDropDownClosing(sender, args) {
    // custom condition to decide if the dropdown should stay open
    if (true) {
        // prevent the dropdown close
        args.set_cancel(true)
    }
}

Clark
Top achievements
Rank 1
Iron
Iron
commented on 14 Sep 2021, 02:34 PM

Hey Peter,

Good news....it works!

The dropdown no longer closes.

Thanks for hanging in there to help me resolve this issue.

Nice job!   :-)

--Clark

 

 

 

Peter Milchev
Telerik team
commented on 14 Sep 2021, 02:45 PM

Thanks for confirming it, Clark, I am happy that you finally achieved the desired functionality. 

I have also edited my initial reply to include the answer to your real question in case someone else visits this thread.

Tags
Ajax DropDownList TreeView
Asked by
Clark
Top achievements
Rank 1
Iron
Iron
Answers by
Peter Milchev
Telerik team
Share this question
or