Regarding Drag and Drop in RAD controls. in UI for ASP.NET AJAX TreeView

Karthik Ulaganathan

11 posts

Member since:
Dec 2009

Posted 25 Jan 2010 Link to this post

Hi,

We are looking for a drag and drop operation with RAD controls in our application. I could see that drag and drop is possible between
1) nodes of a tree view.
2) between trees
3) Tree to HTML elements.

Regarding the 3rd point, HTML elements in the sence is it allowed to drag and drop to all HTML elements or is it allowed to drop only on any specific controls ? I tried dropping a tree node in to a RadGrid and Textbox, it worked on both. But, when tried to drop on a button placed inside a grid, it doesn't seem to work when the mouse focus is on the button.

1) I would like to drop a node on a button control. Is this possible by any means ? or
2) Can i get a complete list of controls where the nodes can be dropped ?!

Thanks & Regards,
Karthik.

Schlurk

812 posts

Member since:
May 2009

Posted 27 Jan 2010 Link to this post

I think the reason you can't drop on top of an ASP.NET button is due to the way this button is set up to react to various events. I could suggest attempting to use some of the HTML controls found in ASP.NET (HtmlInputButton for example) and see if that works better.

Joshua Holt

23 posts

Member since:
Jan 2010

Posted 27 Jan 2010 Link to this post

Hi Karthik,

I believe this issue has to do with the way the grid handles button columns currently. The buttons created in the GridButtonColumn do not have IDs. Therefore the treeview has no target name to send to the server on node drop. I will forward this information on for you.

In the mean time the good news is there are a few work arounds:

Options 1:

The node drop event is fired client side for the buttons in a GridButtonColumn.

So you could get the target button like:

                    function onNodeDropping(sender, args) {        
                        var target = args.get_htmlElement();         
                        if (target.type == "button") {          
                          //Send a post via JS to the server.         
                        }         
                    }         

Target will be the HTML Dom element you dropped the tree node on. After you have retrieved the element you could then post the data you need to the server yourself.

Option 2: (easier)

Create a GridTemplateColumn instead of a GridButtonColumn, and then in the template column ItemTemplate, drop a button control. This button control will have a proper ID, and post back on node drop as expected.

                    <telerik:GridTemplateColumn DefaultInsertValue="" UniqueName="TemplateColumn">         
                            <ItemTemplate>         
                                <asp:Button ID="button" runat="server" />         
                            </ItemTemplate>         
                            </telerik:GridTemplateColumn>         

It really is possible to drop to any HTML element. As we have just seen the NodeDropped post back only seems to fire if the target element has an ID, but the client side event will always fire.

I Hope this helps you!

Joshua Holt