Drag & Drop: how to hide drop indicator line

[Michail]

1. How can I hide the drop indicator line? I didn't find anything about it, how to customise it.

2. Can I indicate the drop target row instead (e.g. with other colors), where the dragged row should be placed? When yes, how I can customise it?

[Dess | Tech Support Engineer, Principal]

Hello Michail,

Thank you for writing.

In order to hide the horizontal line illustrating the drop position, you can set the RadGridView.TableElement.RowDragHint property to Nothing.

As to the second question, you can customize the target row by using the following approach. Handle the PreviewDragOver event of the RadGridViewDragDropService and change the row's color:

Dim targetRowElement As GridDataRowElement
Private Sub Svc_PreviewDragOver(sender As Object,
e As RadDragOverEventArgs) _
Handles _svc.PreviewDragOver
    If TypeOf e.DragInstance Is GridDataRowElement Then

        e.CanDrop = TypeOf e.HitTarget Is GridDataRowElement OrElse
        TypeOf e.HitTarget Is GridTableElement OrElse
        TypeOf e.HitTarget Is GridSummaryRowElement
        If targetRowElement IsNot Nothing Then
            targetRowElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local)
            targetRowElement.ResetValue(LightVisualElement.DrawFillProperty, ValueResetFlags.Local)
            targetRowElement.ResetValue(LightVisualElement.GradientStyleProperty , ValueResetFlags.Local)
        End If
    targetRowElement = TryCast(e.HitTarget, GridDataRowElement)
    If targetRowElement IsNot Nothing Then
            targetRowElement.DrawFill = True
            targetRowElement.GradientStyle = GradientStyles.Solid
            targetRowElement.BackColor = Color.Red
        End If
    End If
End Sub

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

 

Regards,
Dess
Telerik

[Michail]

Oh, thanks a lot! It works. ;-)

Another question:

If the RowDragHint remains enabled, it doesn't always show the correct position.

I'll try to explain what I mean:

You drag a row and move the mouse over another row. Let's say you want to position it between Row 2 and 3. If the mouse cursor is over the first half of the height of Row 3, it gets positioned correctly and also the indicator shows the right position, between Row 2 and 3. If you move the mouse in the second half of the height of Row 3, the indicator switches his position to between Row 3 and 4, but the dragged row will be positioned between Row 2 and 3 instead, because the position, where to drop the dragged row is depending on the mouse position. That's why the the indicator (here as RowDragHint) is confusing when you want to position the dragged row.

[Dess | Tech Support Engineer, Principal]

Hello Michail,

Thank you for writing back.

Following the provided information, I was able to reproduce the issue you are facing with the provided sample project in the support thread that you have opened on the same topic. Please refer to our Demo application >> GridView >> Rows >> Rows Drag & Drop example which is quite useful on this topic. The GetTargetRowIndex method indicates whether the cursor is in the first or second half of the target row. It can be useful for determining the target index and insert the dragged row at the desired location. When you perform drag and drop within the same grid and the dragged row is before the target one, it is important to consider that the dragged row will be removed from the source collection and it will affect the target index as well. I have attached a sample project for your convenience. 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.

Regards,
Dess
Telerik

[Michail]

Thanks a lot! This helped me out! Had to make some slightly changes, but it worked! ;-)

Regards,

Michail