Drag and Drop with additional options

5 posts, 0 answers
  1. Kamen
    Kamen avatar
    7 posts
    Member since:
    May 2011

    Posted 30 Mar 2012 Link to this post

    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
  2. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 04 Apr 2012 Link to this post

    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
    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 their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kamen
    Kamen avatar
    7 posts
    Member since:
    May 2011

    Posted 04 Apr 2012 Link to this post

    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
        }
  5. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 09 Apr 2012 Link to this post

    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
    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 their blog feed now.
  6. Kamen
    Kamen avatar
    7 posts
    Member since:
    May 2011

    Posted 09 Apr 2012 Link to this post

    Hi Bozhidar,

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

    Regards,
    Kamen
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017