Self-Reference and Drag & Drop

6 posts, 1 answers
  1. Marco
    Marco avatar
    97 posts
    Member since:
    Apr 2011

    Posted 26 Jun 2017 Link to this post

    Hi,

    I have discover the Self-Reference Feature of the Gridview with the "file explorer" demo. It is looking pretty nice but I have a critical need about it.

     

    How could I adapt the Drag Drop functionality of the GridView to drop a row into another row and not only before or after (like drag and drop in treeview) ?

     

    Of course I'm open to any alternative way for moving rows through the hierarchy.

     

    Thank you for your consideration

    Marco Guignard

     

  2. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3530 posts

    Posted 28 Jun 2017 Link to this post

    Hello Marco, 

    Thank you for writing.  

    RadGridView handles the whole drag and drop operation by its RadGridViewDragDropService. The PreviewDragOver event allows you to control on what targets the row being dragged can be dropped on. The PreviewDragDrop event allows you to get a handle on all the aspects of the drag and drop operation, the source (drag) grid, the destination (target) control, as well as the row being dragged. This is where we will initiate the actual physical move of the row(s) from one grid to the target control. Please refer to the following help articles:

    http://docs.telerik.com/devtools/winforms/gridview/drag-and-drop/radgridviewdragdropservice
    http://docs.telerik.com/devtools/winforms/gridview/rows/drag-and-drop

    I have prepared a sample project for your reference. Note that This is just a sample approach and it may not cover all possible cases. Feel free to modify it in a way which suits your requirement best.

    I hope this information helps. Should you have further questions I would be glad to help.

    Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Marco
    Marco avatar
    97 posts
    Member since:
    Apr 2011

    Posted 28 Jun 2017 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Hello Dess,

    Thank you for answering.

    The article linked in your answer and your sample are very interesting.

    It is almost perfect but there is one case which is not covered. How do you drop an item into another when the target have no children (like putting the first file in an empty folder) ?

    I don't have found any solution except testing ShiftKey in the svc_PreviewDragDrop and then setting the newRow(ParentFolderId) from the TargetRow(Id) instead of the TargetRow(ParentFolderId).

    Something like the treeview behavior which have three drop position (before, into and after) each having their visual preview would be much nicer.

     

    I think it should be possible by calculating the distance of the cursor from the border of the target row but overriding the visual preview of the destination is over my competence.

  4. Answer
    Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3530 posts

    Posted 29 Jun 2017 Link to this post

    Hello Marco, 

    Thank you for writing back. 

    I can suggest you have a look at the Demo application >> GridView >> Rows >> Rows Drag & Drop example which demonstrates how to indicate before/after a row is the drop position by using the PreviewDragHint event. You can use the DropLocation in the PreviewDragDrop event in order to control whether to insert the record before/after the target row or as a child row. If you need to insert the dragged row as a child row, it is necessary to specify its parent id to be equal to the target row's id. 

    Note that the Demo application can be found in the installation folder of the suite.

    I hope this information helps. If you have any additional questions, please let me know. 

    Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Marco
    Marco avatar
    97 posts
    Member since:
    Apr 2011

    Posted 06 Jul 2017 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Hi,

    PreviewDragHint event doesn't help because this event is fired only one on the beginning of a Drag Drop operation and I would like to change the DragHint depending the control overred. Nevermind PreviewDragOver Event did the trick (haven't find a way to change the draghint but I can highlight the overred control).

    The Rows Drag & Drop sample app is fine, certainly that the function returning the target insert index from the cursor position help me a lot.

  6. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3530 posts

    Posted 07 Jul 2017 Link to this post

    Hello Marco, 

    Thank you for writing.  

    I am glad that the provided sample project was useful. Indeed, the PreviewDragHint event is fired just once allowing the user to change the hint for the dragged row. However, the drop hint remains a horizontal line indicating whether before/after will be the drop action. It is possible to change it in the RadDragDropService.PreviewDropTarget event by setting the RadGridView.TableElement.RowDragHint property to the desired image. Here is a sample code snippet:
    int cnt = 0;
     
    private void svc_PreviewDropTarget(object sender, PreviewDropTargetEventArgs e)
    {
        cnt++;
        RadImageShape img = new RadImageShape();
        if (cnt % 2 == 0)
        {
            img.Image = Properties.Resources.image1;
        }
        else
        {
            img.Image = Properties.Resources.image2;
        }
        this.radGridView1.TableElement.RowDragHint = img;
    }

    I hope this information helps. Should you have further questions I would be glad to help.

    Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top