Self-Reference and Drag & Drop

[Marco]

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

 

[Dess | Tech Support Engineer, Principal]

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

[Marco]

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.

[Dess | Tech Support Engineer, Principal]

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

[Marco]

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.

[Dess | Tech Support Engineer, Principal]

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

[Vishal]

Hi Dess,

I have two grid view, source grid view and target grid view. How to achieve this in target grid view?

Thank you

[Dess | Tech Support Engineer, Principal]

Hi, Vishal,

Your question has already been answered in the support thread you have opened on the same topic. Please, see our answer there for more information.

However, I am posting the answer here as well in order the community to benefit from it.

RadGridView handles the whole drag and drop operation by its RadGridViewDragDropService. As a descendant of RadDragDropService, RadGridViewDragDropService provides a public API that allows managing the drag and drop behavior. 

The PreviewDragOver event allows you to control on what targets the row being dragged can be dropped on. RadDragOverEventArgs gives you access to the dragged and the target item. It is necessary to set the RadDragOverEventArgs.CanDrop argument to true or false considering whether the drop operation is allowed or not. This will affect he cursor respectively. 

The PreviewDragHint event fires when the drag and drop operation is successfully started and the drag hint is going to be created. The PreviewDragHintEventArgs.UseDefaultHint property controls whether the default hint will be displayed. If you set this argument to false you can specify the drag hint by setting the DragHint property to the desired image. You have access to the DragInstance as well. The Demo application >> GridView >> Rows >> Rows Drag & Drop example demonstrates how to indicate before/after a row is the drop position by using the PreviewDragHint event.

We kindly ask you to use just one thread for a specific problem to contact us. Posting the same questions numerous times slows down our response time because we will need to review and address two or more tickets instead of one. Moreover, threads are handled according to license and time of posting, so if it is an urgent problem, we suggest you use a support ticket, which would be handled before a forum thread.

Thank you for your understanding.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik