Drag and Drop with additional options

[Kamen]

Hi,

I have a Grid with items and a TreeView. I can drag and drop items from the Grid to the TreeView and it works fine. Right now dragging and dropping an item from the Grid to the Tree is like making a copy of that item from one node in the tree to another. However I need to extend the functionality and offer the user an option to select what he/she actully needs to do (Copy/Move/Make a Reference).

I need something like: onRowDropping (js event of the TreeVire) to show a pop-up with 3 options and when the user selects one of the options to actually be able to pass it the the server side event NodeDrop of the TreeView.

Is this possible with the Telerik controls?

Regards,
Kamen

[Bozhidar]

Hello Kamen,

In order to determine which event you need, could you specify how exactly do you implement the transfer between the Grid and the Tree. It would be helpful if you could send the code for the page with the Grid and the Tree.
 
All the best,
Bozhidar
the Telerik team

[Kamen]

I can't send you the original code, but I can give an example for what I need:
This is my aspx code:

<form id="form1" runat="server">

    <script type="text/javascript">

            function rgSource_onRowDropping(sender, args) {

                //Somehow I need here to ask the user what action he needs to do with the dragged items:

                //Copy/Move/Reference them

            }

 

            function rtvDestination_onMouseOver(sender, args) {

                var eID = "<%= hiddenDestination.ClientID %>";

                $get(eID).value = args.get_node().get_value();

            }

    </script>

    <telerik:RadScriptManager ID="ScriptManager" runat="server" />

    <div>

        <telerik:RadTreeView ID="rtvDestination" OnClientMouseOver="rtvDestination_onMouseOver" runat="server">

            <Nodes>

                <telerik:RadTreeNode Value="1" Text="Node 1" runat="server">

                    <Nodes>

                        <telerik:RadTreeNode Value="11" Text="Node Inner 1" runat="server"/>

                        <telerik:RadTreeNode Value="12" Text="Node Inner 2" runat="server"/>

                    </Nodes>

                </telerik:RadTreeNode>

                <telerik:RadTreeNode Value="2" Text="Node 2" runat="server"/>

                <telerik:RadTreeNode Value="3" Text="Node 3" runat="server"/>

            </Nodes>

             

        </telerik:RadTreeView>

 

        <input type="hidden" id="hiddenDestination" runat="server" />

        <telerik:RadGrid ID="rgSource" AllowSorting="true" OnRowDrop="rgSource_RowDrop" AllowMultiRowSelection="true" runat="server">

            <ClientSettings AllowRowsDragDrop="True">

                    <Selecting AllowRowSelect="True" EnableDragToSelectRows="false"/>

                    <ClientEvents OnRowDropping="rgSource_onRowDropping" />

                </ClientSettings>

        </telerik:RadGrid>

     

    </div>

</form>



And this is my aspx.cd

protected void Page_Load(object sender, EventArgs e)
    {
        initData();
    }

    private void initData()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("ID");
        dt.Columns.Add("Text");
        dt.Rows.Add("1", "First row");
        dt.Rows.Add("2", "Second row");
        dt.Rows.Add("3", "Third row");
        dt.Rows.Add("4", "Fourth row");
        rgSource.DataSource = dt;
        rgSource.DataBind();
    }

    protected void rgSource_RowDrop(object sender, GridDragDropEventArgs e)
    {
        //I need here the list of the items that are dragged
        // I need their ((DataRowView)(draggedItem[0].DataItem))["ID"]
        IList<GridDataItem> draggedItem = e.DraggedItems;

        //Also need the destination they are dragged to
        String destinationItem = hiddenDestination.Value;

        //and need somehow to know what action did the user selected Copy/Move/Reference
    }

[Bozhidar]

Hello Kamen,

Unfortunately you won't be able to use the method described. The problem is that you cannot make the rgSource_onRowDropping() function wait for the result of the popup window. So you won't be able to use the Server OnRowDrop event.

You can use another approach. In the rgSource_onRowDropping event you can take the ID's of the dragged elements and store them in another hidden field. Then you set args.set_cancel(true) to stop the event and show the popup window. In the window after you make your choice do a regular postback (for instance through a button) and on the server make the transfer using the ID's to find which Grid items you should transfer.

To learn how to pass arguments between the main window and the popup, you can inspect the following demo:
http://demos.telerik.com/aspnet-ajax/window/examples/dialogreturnvalue/defaultcs.aspx 
 
Regards,
Bozhidar
the Telerik team

[Kamen]

Hi Bozhidar,

Thanks for the help! I'll use your suggestion.

Regards,
Kamen