Drag & Drop RadListView Icon

[Wiliam]

Hello, sorry my english, I need a help to solve the following question: I am wanting to do the Drag & Drop in RadListView, and the items are being displayed as radlist Icons, need to drag the icons between two radlist, there is this possibility?
I'm waiting Thanks

[Dess | Tech Support Engineer, Principal]

Hello Wiliam,

Thank you for contacting Telerik Support.

RadListView supports Drag & Drop functionality. First you should enable the AllowDragDrop property for both of the RadListViews. As the build-in Drag & Drop behaviour moves listViewItems to the target location with user interaction only, it is necessary to subscribe to the PreviewDragDrop event where you should make a copy of the selected Item. It is indispensable to handle the event in order to prevent removing the selected item from the first listView. The copy item should be added to the second listView. Please have a look at the following code snippet:

public Form1()
       {
           InitializeComponent();

           this.radListView1.AllowDragDrop = true;
           this.radListView2.AllowDragDrop = true;
           this.radListView3.AllowDragDrop = true;

           radListView1.ListViewElement.DragDropService.PreviewDragDrop += DragDropService_PreviewDragDrop;
           radListView2.ListViewElement.DragDropService.PreviewDragDrop += DragDropService_PreviewDragDrop;
           radListView3.ListViewElement.DragDropService.PreviewDragDrop += DragDropService_PreviewDragDrop;
       }

       void DragDropService_PreviewDragDrop(object sender, Telerik.WinControls.RadDropEventArgs e)
       {
           e.Handled = true;
           ListViewDataItem listViewDISender = (sender as ListViewDragDropService).DraggedItem as ListViewDataItem;
           RadListView senderListView = listViewDISender.Owner.ElementTree.Control as RadListView;
           IconListViewVisualItem originalItem = e.DragInstance as IconListViewVisualItem;
           ListViewDataItem copyItem = new ListViewDataItem(originalItem.Text);
           copyItem.Image = originalItem.Image;

           IconListViewElement viewElement = e.HitTarget as IconListViewElement;
           if (viewElement != null)
           {
               RadListView listViewControl = viewElement.ElementTree.Control as RadListView;
               if (listViewControl != senderListView)
               {
                   listViewControl.Items.Add(copyItem);
               }
           }

           IconListViewVisualItem visualItem = e.HitTarget as IconListViewVisualItem;

           if (visualItem != null)
           {
               RadListView listViewControl = visualItem.ElementTree.Control as RadListView;
               if (listViewControl != senderListView)
               {
                   listViewControl.Items.Add(copyItem);
               }
           }
       }

The obtained result is displayed in drag&drop.png.

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

Regards,
Desislava
Telerik

[Wiliam]

Thanks for replying, but I'm having problems, I converted to vb.net using converter.telerik and implemented in my code RadListView2.ListViewElement.DragDropService.PreviewDragDrop, says PreviewDragDrop not part of DragDropService therefore giving me this error code , you may be using the code incorrectly, you guys can send me in vb.net.
I'm waiting Thanks

[Dess | Tech Support Engineer, Principal]

Hello Wiliam,

Thank you for writing back.

You may use the following code snippet in VB.NET:

Imports Telerik.WinControls.UI

Public Class Form1
    Public Sub New()
        InitializeComponent()

        Me.RadListView1.AllowDragDrop = True
        Me.RadListView2.AllowDragDrop = True
        Me.RadListView3.AllowDragDrop = True

        AddHandler RadListView1.ListViewElement.DragDropService.PreviewDragDrop, AddressOf DragDropService_PreviewDragDrop
        AddHandler RadListView2.ListViewElement.DragDropService.PreviewDragDrop, AddressOf DragDropService_PreviewDragDrop
        AddHandler RadListView3.ListViewElement.DragDropService.PreviewDragDrop, AddressOf DragDropService_PreviewDragDrop
    End Sub

    Private Sub DragDropService_PreviewDragDrop(sender As Object, e As Telerik.WinControls.RadDropEventArgs)
        e.Handled = True
        Dim listViewDISender As ListViewDataItem = TryCast(TryCast(sender, ListViewDragDropService).DraggedItem, ListViewDataItem)
        Dim senderListView As RadListView = TryCast(listViewDISender.Owner.ElementTree.Control, RadListView)
        Dim originalItem As IconListViewVisualItem = TryCast(e.DragInstance, IconListViewVisualItem)
        Dim copyItem As New ListViewDataItem(originalItem.Text)
        copyItem.Image = originalItem.Image

        Dim viewElement As IconListViewElement = TryCast(e.HitTarget, IconListViewElement)
        If viewElement IsNot Nothing Then
            Dim listViewControl As RadListView = TryCast(viewElement.ElementTree.Control, RadListView)
            If Not listViewControl.Equals(senderListView) Then
                listViewControl.Items.Add(copyItem)
            End If
        End If

        Dim visualItem As IconListViewVisualItem = TryCast(e.HitTarget, IconListViewVisualItem)

        If visualItem IsNot Nothing Then
            Dim listViewControl As RadListView = TryCast(visualItem.ElementTree.Control, RadListView)
            If Not listViewControl.Equals(senderListView) Then
                listViewControl.Items.Add(copyItem)
            End If
        End If
    End Sub

End Class

I hope this information helps. Please let me know if I can assist you any further with this service request.

Regards,
Desislava
Telerik

[Wiliam]

Thanks for replying, was of great help to code, but I have one more doubt, if I use CustomVisualItem.vb, WindowsForm> Demos> ListView> CustomItem, that way I can do the Drag & Drop images by RadList or need to change the CustomVisualItem.vb the code, following code for verification: 

Class CustomVisualItem
    Inherits IconListViewVisualItem
    Private WithEvents imageElement As LightVisualElement
    Private paglogElement As LightVisualElement
    Private marcaElement As LightVisualElement
    Private doctypeElement As LightVisualElement
    Private anexosElement As LightVisualElement
    Private WithEvents dropimageElement As LightVisualElement

    Private mainlayout As StackLayoutPanel
    Private itemLayout As StackLayoutPanel
    Private buttonlayout As StackLayoutPanel

    Private PagRecuaOver As Boolean
    Private _index As Byte

    Public Sub dropimageElement_MouseMove(ByVal sender As Object, ByVal e As System.EventArgs) Handles dropimageElement.MouseMove

        dropimageElement.Image = Global.DocUser.My.Resources.Resources.IconeDropOver

    End Sub
    Public Sub dropimageElement_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) Handles dropimageElement.MouseLeave

        dropimageElement.Image = Global.DocUser.My.Resources.Resources.IconeDrop

    End Sub
    Public Sub imageElement_DoubleClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles imageElement.DoubleClick

        If _index = 0 Then
            Form1.RadSpinEditor1.Value = paglogElement.Text
        Else
            Form1.RadSpinEditor2.Value = paglogElement.Text
        End If

        Form1.ModoExibirMuda(_index, 0)

    End Sub

    Public Sub imageElement_Click(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles imageElement.MouseDown

        'If Control.ModifierKeys <> Keys.Shift Or Control.ModifierKeys <> Keys.Control Then
        '    ListViewIconesSel.Clear()
        'End If

        If e.Button = MouseButtons.Left Then
            If ListViewIconesSel.Contains(paglogElement.Text) Then
                ListViewIconesSel.Remove(paglogElement.Text)
                Me.BackColor = Color.FromArgb(255, 230, 238, 254)
            Else
                ListViewIconesSel.Add(paglogElement.Text)
                Me.BackColor = Color.Yellow
            End If
        End If
        'Dim copyItem As New ListViewDataItem(paglogElement.Text)
        'copyItem.Image = paglogElement.Image

        'Dim viewElement As IconListViewElement = TryCast(e.HitTarget, IconListViewElement)
        'If viewElement IsNot Nothing Then
        '    Dim listViewControl As RadListView = TryCast(viewElement.ElementTree.Control, RadListView)
        '    If listViewControl Is ListViewIconesSel Then
        '        listViewControl.Items.Add(copyItem)
        '    End If
        'End If



    End Sub
    Protected Overrides Sub CreateChildElements()

        MyBase.CreateChildElements()

        mainlayout = New StackLayoutPanel()
        mainlayout.Orientation = Orientation.Horizontal
        mainlayout.Alignment = ContentAlignment.MiddleCenter

        itemLayout = New StackLayoutPanel()
        itemLayout.Orientation = Orientation.Vertical
        itemLayout.Alignment = ContentAlignment.MiddleCenter

        'Dim FillPrimitive As Primitives.FillPrimitive = New Primitives.FillPrimitive()
        'FillPrimitive.NumberOfColors =
        'FillPrimitive.GradientStyle = GradientStyles.Solid
        'FillPrimitive.BackColor = Color.FromArgb(255, 230, 238, 254)
        'FillPrimitive.GradientPercentage = 1.0!
        'FillPrimitive.MinSize = New Size(50, 50)
        'itemLayout.Children.Add(FillPrimitive)

        buttonlayout = New StackLayoutPanel()
        buttonlayout.Orientation = Orientation.Horizontal
        buttonlayout.Alignment = ContentAlignment.TopRight

        ' Botões
        marcaElement = New LightVisualElement()
        marcaElement.DrawText = False
        marcaElement.ImageLayout = ImageLayout.Center
        marcaElement.StretchVertically = False
        marcaElement.Visibility = ElementVisibility.Visible
        marcaElement.Image = Global.DocUser.My.Resources.Resources.Marcador18
        marcaElement.Alignment = ContentAlignment.BottomRight
        buttonlayout.Children.Add(marcaElement)

        doctypeElement = New LightVisualElement()
        doctypeElement.DrawText = False
        doctypeElement.ImageLayout = ImageLayout.Center
        doctypeElement.StretchVertically = False
        doctypeElement.Visibility = ElementVisibility.Visible
        doctypeElement.Image = Global.DocUser.My.Resources.Resources.DocType18
        doctypeElement.Alignment = ContentAlignment.BottomRight
        buttonlayout.Children.Add(doctypeElement)

        anexosElement = New LightVisualElement()
        anexosElement.DrawText = False
        anexosElement.ImageLayout = ImageLayout.Center
        anexosElement.StretchVertically = False
        anexosElement.Visibility = ElementVisibility.Visible
        anexosElement.Image = Global.DocUser.My.Resources.Resources.Anexos18
        anexosElement.Alignment = ContentAlignment.BottomRight
        buttonlayout.Children.Add(anexosElement)

        paglogElement = New LightVisualElement()
        paglogElement.TextAlignment = ContentAlignment.TopRight
        paglogElement.Font = New Font("Segoe UI", 12, FontStyle.Bold, GraphicsUnit.Point)
        paglogElement.Alignment = ContentAlignment.TopRight
        buttonlayout.Children.Add(paglogElement)

        itemLayout.Children.Add(buttonlayout)

        ' Imagem
        imageElement = New LightVisualElement()
        imageElement.DrawText = False
        imageElement.ImageLayout = ImageLayout.Center ' System.Windows.Forms.ImageLayout.Zoom
        imageElement.StretchHorizontally = False
        imageElement.StretchVertically = False
        imageElement.AutoSize = False
        imageElement.Padding = New Padding(0)
        imageElement.Alignment = ContentAlignment.BottomRight
        itemLayout.Children.Add(imageElement)

        dropimageElement = New LightVisualElement()
        dropimageElement.DrawText = False
        dropimageElement.ImageLayout = ImageLayout.Center
        dropimageElement.StretchVertically = False
        dropimageElement.Visibility = ElementVisibility.Visible
        dropimageElement.Image = Global.DocUser.My.Resources.Resources.IconeDrop
        dropimageElement.Alignment = ContentAlignment.MiddleLeft
        dropimageElement.Margin = New Padding(0)
        mainlayout.Children.Add(dropimageElement)

        mainlayout.Children.Add(itemLayout)

        Me.Children.Add(mainlayout)

        Me.Margin = New Padding(10, 0, 10, 0)
        Me.Padding = New Padding(10, 0, 10, 0)
        Me.Shape = New RoundRectShape(5)
        Me.BorderColor = Color.FromArgb(255, 110, 153, 210)
        Me.BorderGradientStyle = GradientStyles.Solid
        Me.DrawBorder = True
        Me.DrawFill = True
        Me.BackColor = Color.FromArgb(255, 230, 238, 254)
        Me.GradientStyle = GradientStyles.Solid
        Me.Alignment = ContentAlignment.BottomCenter

    End Sub
    Protected Overrides Sub SynchronizeProperties()

        Me.marcaElement.Visibility = IIf(Convert.ToString(Me.Data("marcadores")) <> "", ElementVisibility.Visible, ElementVisibility.Collapsed)
        Me.marcaElement.ToolTipText = Convert.ToString(Me.Data("marcadores"))

        Me.doctypeElement.Visibility = IIf(Convert.ToString(Me.Data("doctype")) <> "", ElementVisibility.Visible, ElementVisibility.Collapsed)
        Me.doctypeElement.ToolTipText = Convert.ToString(Me.Data("doctype"))

        Me.anexosElement.Visibility = IIf(Convert.ToString(Me.Data("anexos")) <> "", ElementVisibility.Visible, ElementVisibility.Collapsed)
        Me.anexosElement.ToolTipText = Convert.ToString(Me.Data("anexos"))

        If Val(Convert.ToString(Me.Data("paglog"))) > 0 Then
            Me.paglogElement.Visibility = ElementVisibility.Visible
            Me.paglogElement.Text = Convert.ToString(Me.Data("paglog"))
        Else
            Me.paglogElement.Visibility = ElementVisibility.Collapsed
            Me.DrawBorder = False
            Me.DrawFill = False
        End If
        Me.imageElement.Tag = Convert.ToString(Me.Data("paglog"))
        Me.Tag = Convert.ToString(Me.Data("paglog"))
        Me.imageElement.Image = Me.Data("imagem")


        Me.NotifyParentOnMouseInput = True
        Me.ShouldHandleMouseInput = False

    End Sub
    Protected Overrides Function MeasureOverride(ByVal availableSize As SizeF) As SizeF
        Dim measuredSize As SizeF = MyBase.MeasureOverride(availableSize)

        Me.mainlayout.Measure(measuredSize)

        Return measuredSize
    End Function
    Protected Overrides Function ArrangeOverride(ByVal finalSize As SizeF) As SizeF
        MyBase.ArrangeOverride(finalSize)

        Me.mainlayout.Arrange(New RectangleF(PointF.Empty, finalSize))

        Return finalSize
    End Function
    Public Sub New(ByVal Index As Byte)

        _index = Index

        If _index = 0 Then
            imageElement.Size = New Size(ListViewIconesTam(ExibicaoModo(_index)).Width, ListViewIconesTam(ExibicaoModo(_index)).Height - 30)
            imageElement.Alignment = ContentAlignment.BottomCenter
            dropimageElement.Visibility = ElementVisibility.Collapsed
        Else
            imageElement.Size = New Size(ListViewIconesTam(ExibicaoModo(_index)).Width - 20, ListViewIconesTam(ExibicaoModo(_index)).Height - 30)
            imageElement.Alignment = ContentAlignment.BottomRight
            dropimageElement.Visibility = ElementVisibility.Visible
        End If

    End Sub


End Class

This is very useful your codes thanks, I'm awaiting

[Dess | Tech Support Engineer, Principal]

Hello Wiliam,

Thank you for writing back.

Please, find the attached sample VB.NET project with Drag & Drop functionality with copying of custom objects.

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

Regards,
Desislava
Telerik

[Wiliam]

Another question, if I load the datasource using RadGrig I'm going to get the drag drop or I'll upload image by image in RadGrid?

thank you

[Dess | Tech Support Engineer, Principal]

Hello Wiliam,

Thank you for writing back.

If you want Drag & Drop functionality in RadGridView you should implement your own one. You may have a look at our RadControls examples: GridView->Rows: Rows Drag & Drop for demonstration of the possible functionality. The following blog article Extending RadGridView to Enable Row Drag and Drop Functionality is quite useful about it. If you have any difficulties in C# code examples, feel free to use our Code Converter. 

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

Regards,
Desislava
Telerik