Drag & Drop RadListView Icon

8 posts, 0 answers
  1. Wiliam
    Wiliam avatar
    8 posts
    Member since:
    Aug 2012

    Posted 17 Jul 2013 Link to this post

    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
  2. Dess
    Admin
    Dess avatar
    1601 posts

    Posted 19 Jul 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINFORMS.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Wiliam
    Wiliam avatar
    8 posts
    Member since:
    Aug 2012

    Posted 19 Jul 2013 Link to this post

    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
  5. Dess
    Admin
    Dess avatar
    1601 posts

    Posted 24 Jul 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINFORMS.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  6. Wiliam
    Wiliam avatar
    8 posts
    Member since:
    Aug 2012

    Posted 24 Jul 2013 Link to this post

    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
  7. Dess
    Admin
    Dess avatar
    1601 posts

    Posted 29 Jul 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINFORMS.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  8. Wiliam
    Wiliam avatar
    8 posts
    Member since:
    Aug 2012

    Posted 22 Aug 2013 Link to this post

    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
  9. Dess
    Admin
    Dess avatar
    1601 posts

    Posted 27 Aug 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINFORMS.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
Back to Top
UI for WinForms is Visual Studio 2017 Ready