DragDrop Scenario and Getting started

6 posts, 1 answers
  1. Erik
    Erik avatar
    314 posts
    Member since:
    Feb 2008

    Posted 16 Feb 2012 Link to this post

    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:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                 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




  2. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 17 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. DevCraft banner
  4. Erik
    Erik avatar
    314 posts
    Member since:
    Feb 2008

    Posted 17 Feb 2012 Link to this post

    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
  5. Erik
    Erik avatar
    314 posts
    Member since:
    Feb 2008

    Posted 17 Feb 2012 Link to this post

    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.
  6. Answer
    Maya
    Admin
    Maya avatar
    4062 posts

    Posted 17 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  7. Barath Kumar
    Barath Kumar avatar
    1 posts
    Member since:
    May 2012

    Posted 25 May 2012 Link to this post

    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
Back to Top
DevCraft banner