DragDrop Scenario and Getting started

[Erik]

Hello Guys,

I'm new to the drag-drop and am testing the needs I have. I come across some confusing things I must say; some old/new behavior may-be.

The scenario I want: 2 Listboxes, drag left to right, but the left listbox is not to be changed and the right one can thus contain more items of the same type. finally I want the right listbox to allow reorder via drag/drop.

I've seen the online demo, and this does some of what I want:
http://demos.telerik.com/silverlight/#DragAndDrop/FirstLook 

I also did the exercize on this "getting started":
http://www.telerik.com/help/silverlight/raddraganddrop-getting-started-with-drag-and-drop.html 

The confusing thing is that the "Getting Started" uses code events (something I want, because I anticipate this need to take control in the future) and the Online Example has no code. The  "Getting Started"  has something like this:
    <Setter Property="telerik:RadDragAndDropManager.AllowDrag" Value="True" />
While the online example does this:
    <Setter Property="telerik:DragDropManager.AllowDrag" Value="True" />
    <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" /> 
                   ( ^ is not possible in the "Getting Started" ?)

Whats the difference between the 2?

I did manage to create a app where I can drag items left > right and on drop a new items is created, and the left list stays in tact. Multiple items of the same type is thus a go.

What I want is that the auto rearange that is automatically done in the Online example (right box) where you can pick up the 2nd item and place it between the 4rd and 5th is done in my app to. But I do not have a clue how. Here's the code so far:

XAML:

<UserControl xmlns:my="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" x:Class="XXXXX.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:local="clr-namespace:XXXXXXX.Desktop"
             mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

    <UserControl.Resources>
        <DataTemplate x:Key="ApplicationDragTemplate">
            <Image Source="{Binding IconPath}" Stretch="None" VerticalAlignment="Top" />
        </DataTemplate>
        <Style TargetType="ListBoxItem" x:Key="draggableItemStyle">
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="Foreground" Value="#000000" />
            <Setter Property="telerik:RadDragAndDropManager.AllowDrag" Value="True" />
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="10" />
            <ColumnDefinition Width="4*" />
        </Grid.ColumnDefinitions>
        <ListBox x:Name="allApplicationsBox"
                telerik:RadDragAndDropManager.AllowDrop="False"
                ItemContainerStyle="{StaticResource draggableItemStyle}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid Width="150">
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Image Grid.Row="0"
                            HorizontalAlignment="Center"
                            Source="{Binding IconPath}"
                            Width="32"
                            Height="32"
                            Margin="0 0 5 0" />
                        <TextBlock Grid.Row="1"
                                Text="{Binding Name}"
                                FontWeight="Bold"
                                HorizontalAlignment="Center" />
                        <TextBlock Text="{Binding Author}"
                                Grid.Row="2"
                                HorizontalAlignment="Center" />
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <!--My Applications-->
        <ListBox x:Name="myApplicationsBox"
                telerik:RadDragAndDropManager.AllowDrop="True"
                ItemContainerStyle="{StaticResource draggableItemStyle}"
                Grid.Column="2">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel VerticalAlignment="Stretch"
                            HorizontalAlignment="Stretch">
                        <Image Source="{Binding IconPath}"
                            Margin="0 0 3 0"
                            HorizontalAlignment="Center" />
                        <TextBlock Text="{Binding Name}"
                                HorizontalAlignment="Center" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <telerik:RadUniformGrid Columns="3"
                                        HorizontalAlignment="Left"
                                        VerticalAlignment="Top" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
    </Grid>
</UserControl>

And here's the code:

Imports System.Collections.ObjectModel
Imports Telerik.Windows.Controls.DragDrop
Imports System.Windows.Browser

Partial Public Class MainPage
    Inherits UserControl

    Private Sub CreateItem(ByRef aobj_Data As ObservableCollection(Of ApplicationInfo), ByVal astr_Type As String)
        With aobj_Data
            Select Case astr_Type.Trim.ToLower
                Case "Atom".ToLower : .Add(New ApplicationInfo("Atom", "images/Atom.png", "C.E.R.N.", "Large Collider"))
                Case "Brush".ToLower : .Add(New ApplicationInfo("Brush", "Images/Brush.png", "Imagine Inc.", "Paintbrush"))
                Case "Calendar".ToLower : .Add(New ApplicationInfo("Calendar", "Images/CalendarEvents.png", "Control AG", "Lively Calendar"))
                Case "CDBurn".ToLower : .Add(New ApplicationInfo("CDBurn", "Images/CDBurn.png", "The CD Factory", "Fire Burning ROM"))
                Case "favo".ToLower : .Add(New ApplicationInfo("favo", "Images/favorites.png", "Star Factory", "Fav Explorer"))
                Case "Connected".ToLower : .Add(New ApplicationInfo("Connected", "Images/Connected.png", "Open Org", "IE Fox"))
                Case "ChartDot".ToLower : .Add(New ApplicationInfo("ChartDot", "Images/ChartDot.png", "AA-AZ inc", "Charting"))
                Case "Games".ToLower : .Add(New ApplicationInfo("Games", "Images/Games.png", "EB Games", "SuperPlay"))
            End Select
        End With
    End Sub

    Public Function GenerateApplicationInfos1() As ObservableCollection(Of ApplicationInfo)
        Dim data As New ObservableCollection(Of ApplicationInfo)()
        CreateItem(data, "Atom")
        CreateItem(data, "Brush")
        CreateItem(data, "Calendar")
        CreateItem(data, "CDBurn")
        CreateItem(data, "favo")
        CreateItem(data, "Connected")
        CreateItem(data, "ChartDot")
        CreateItem(data, "Games")
        Return data
    End Function
    Public Function GenerateApplicationInfos2() As ObservableCollection(Of ApplicationInfo)
        Dim data As New ObservableCollection(Of ApplicationInfo)()
        CreateItem(data, "Games")
        Return data
    End Function

    Private allApplications As ObservableCollection(Of ApplicationInfo) = GenerateApplicationInfos1()
    Private myApplications As ObservableCollection(Of ApplicationInfo) = GenerateApplicationInfos2()
    Public Sub New()
        InitializeComponent()

        allApplicationsBox.ItemsSource = allApplications
        myApplicationsBox.ItemsSource = myApplications
        RadDragAndDropManager.AddDragQueryHandler(Me, AddressOf OnDragQuery)
        RadDragAndDropManager.AddDragInfoHandler(Me, AddressOf OnDragInfo)
        RadDragAndDropManager.AddDropQueryHandler(Me, AddressOf OnDropQuery)
        RadDragAndDropManager.AddDropInfoHandler(Me, AddressOf OnDropInfo)



    End Sub

    <ScriptableMember()> _
    Public Sub CallMeInSilverlight(ByVal astr_Command As String)

    End Sub

    Private Sub OnDragQuery(sender As Object, e As DragDropQueryEventArgs)
        Dim listBoxItem As ListBoxItem = TryCast(e.Options.Source, ListBoxItem)
        Dim box As ListBox = TryCast(ItemsControl.ItemsControlFromItemContainer(listBoxItem), ListBox)
        If e.Options.Status = DragStatus.DragQuery AndAlso box IsNot Nothing Then
            e.Options.Payload = box.SelectedItem
            Dim cue As New ContentControl()
            cue.ContentTemplate = TryCast(Me.Resources("ApplicationDragTemplate"), DataTemplate)
            cue.Content = box.SelectedItem
            e.Options.DragCue = cue
            e.Options.ArrowCue = RadDragAndDropManager.GenerateArrowCue()
        End If
        e.QueryResult = True
    End Sub

    Private Sub OnDragInfo(sender As Object, e As DragDropEventArgs)
        Dim listBoxItem As ListBoxItem = TryCast(e.Options.Source, ListBoxItem)
        Dim box As ListBox = TryCast(ItemsControl.ItemsControlFromItemContainer(listBoxItem), ListBox)
        Dim itemsSource As IList(Of ApplicationInfo) = TryCast(box.ItemsSource, IList(Of ApplicationInfo))
        Dim payload As ApplicationInfo = TryCast(e.Options.Payload, ApplicationInfo)
        If e.Options.Status = DragStatus.DragComplete Then
            If payload IsNot Nothing AndAlso itemsSource.Contains(payload) Then
                'itemsSource.Remove(payload)
            End If
        End If
    End Sub

    Private Sub OnDropQuery(sender As Object, e As DragDropQueryEventArgs)
        Dim box As ItemsControl = TryCast(e.Options.Destination, ItemsControl)
        Dim itemsSource As IList(Of ApplicationInfo) = TryCast(box.ItemsSource, IList(Of ApplicationInfo))
        Dim payload As ApplicationInfo = TryCast(e.Options.Payload, ApplicationInfo)
        e.QueryResult = payload IsNot Nothing AndAlso Not itemsSource.Contains(payload)
    End Sub


    Private Sub OnDropInfo(sender As Object, e As DragDropEventArgs)
        Dim box As ItemsControl = TryCast(e.Options.Destination, ItemsControl)
        Dim itemsSource As IList(Of ApplicationInfo) = TryCast(box.ItemsSource, IList(Of ApplicationInfo))
        Dim payload As ApplicationInfo = TryCast(e.Options.Payload, ApplicationInfo)
        If e.Options.Status = DragStatus.DropComplete Then
            'If Not itemsSource.Contains(payload) Then
            CreateItem(itemsSource, payload.TypeCode)
            '    itemsSource.Add(payload)
            'End If
        End If
    End Sub

End Class







Public Class ApplicationInfo
    Public Sub New(ByVal astr_TypeCode As String, ByVal astr_IconPath As String, ByVal astr_Name As String, ByVal astr_Author As String)
        Me.TypeCode = astr_TypeCode
        Me.IconPath = astr_IconPath
        Me.Name = astr_Name
        Me.Author = astr_Author
    End Sub
    Public Property TypeCode() As [String]
        Get
            Return m_TypeCode
        End Get
        Set(value As [String])
            m_TypeCode = value
        End Set
    End Property
    Private m_TypeCode As [String]
    Public Property IconPath() As [String]
        Get
            Return m_IconPath
        End Get
        Set(value As [String])
            m_IconPath = value
        End Set
    End Property
    Private m_IconPath As [String]
    Public Property Name() As [String]
        Get
            Return m_Name
        End Get
        Set(value As [String])
            m_Name = value
        End Set
    End Property
    Private m_Name As [String]
    Public Property Author() As [String]
        Get
            Return m_Author
        End Get
        Set(value As [String])
            m_Author = value
        End Set
    End Property
    Private m_Author As [String]
End Class

So, how can I get the rearangeing to work?

also, where can i find some more info about the 4 events, or don't I need them at all?


Thanks in advance,

Erik

[Maya]

Hi Erik,

Generally, DragDropManager is the current one and you should work with it. RadDragAndDropManager is the old one and it will be obsoleted in a time. I would recommend you to work with DragDropManager. Please refer to our online documentation as well for additional information.

Kind regards,
Maya
the Telerik team

[Erik]

Hi Maya,

I understand and it's gooed that Telerik contantly renews things. But why do you not show that on top of the doc? Now I created an example, invested time, in a (almost) obsolete topic. This is a constant anoyans with the doc, I also have this a lot with ORM. If yoy replace a control, why not put a notice at top of the old topic and point to the new? 

Erik

[Erik]

Hi Maya,

The example "Getting Started"
http://www.telerik.com/help/silverlight/dragdropmanager-getting-started.html 
Is full of errors when you take the vb code.

[Maya]

Hi Erik,

Indeed, you do have a point and we will update our documentation so that it reflects our currently recommended approach - to implement DragDropManager. Nevertheless, RadDragAndDropManager is still available and everyone used to working with it can benefit from the available documentation and demos.
Considering the errors in our VB section, we will retest them and correct any errors we find. Thank you a lot for your feedback.   
Please let me know in case you need any assistance.

All the best,
Maya
the Telerik team

[Barath Kumar]

Hi Maya,

Also please include what are the name spaces that needs to be included in both .xaml and .cs files. 

Thanks and regards,
Barath Kumar S