Drag and Drop between Grids, and changing content

[Tyler Rendleman]

I know that I am missing something obvious, but I am not able to do what I want, and I hope you can help me.

Situation: For those of you familiar with Agile, I am making a Scrum board out of a database of tasks/issues.  I have used mulitiple RadGridViews that are filtered by issue status (logged/in progress/ready to test/testing complete).  I want to be able to select a row (which has been modified to look like an index card) in one of the gridviews, and drop it in another one (move it from logged to in progress).  Upon drop, I want the status to update to the new status. 

Right now, I can grab a row, and it looks like I can move it, but the drop control always indicates "no" - a circle with a red line.  Also, the text being displayed on the card is the itemsource text, as opposed to the ID.  That is a minor issue.

Any thoughts on what I am missing?  I have included my XAML and CS.

VS 2010, Windows Server 2008, SL3

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Data;
using Telerik.Windows.Controls;
using Telerik.Windows.Data;
using Telerik.Windows.QuickStart;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Collections;
using Telerik.Windows.Controls.GridView;
using System.Globalization;
using Telerik.Windows.Controls.Charting;
using Telerik.Windows.Controls.DragDrop;
using Telerik.Windows.Controls.TreeView;

namespace GeminiSilverlight2
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
          InitializeComponent();
          Loaded += new RoutedEventHandler(MainPage_Loaded);


          RadDragAndDropManager.AddDropQueryHandler(searchResultsLogged, OnDropQuery);
          RadDragAndDropManager.AddDropQueryHandler(searchResultsInProgress, OnDropQuery);
          RadDragAndDropManager.AddDropQueryHandler(searchResultsReadyToTest, OnDropQuery);
          RadDragAndDropManager.AddDropQueryHandler(searchResultsTestingComplete, OnDropQuery);

          RadDragAndDropManager.AddDropInfoHandler(searchResultsLogged, OnDropInfo);
          RadDragAndDropManager.AddDropInfoHandler(searchResultsInProgress, OnDropInfo);
          RadDragAndDropManager.AddDropInfoHandler(searchResultsReadyToTest, OnDropInfo);
          RadDragAndDropManager.AddDropInfoHandler(searchResultsTestingComplete, OnDropInfo);

          RadDragAndDropManager.AddDragQueryHandler(searchResultsLogged, OnDragQuery);
          RadDragAndDropManager.AddDragQueryHandler(searchResultsInProgress, OnDragQuery);
          RadDragAndDropManager.AddDragQueryHandler(searchResultsReadyToTest, OnDragQuery);
          RadDragAndDropManager.AddDragQueryHandler(searchResultsTestingComplete, OnDragQuery);

          RadDragAndDropManager.AddDragInfoHandler(searchResultsLogged, OnDragInfo);
          RadDragAndDropManager.AddDragInfoHandler(searchResultsInProgress, OnDragInfo);
          RadDragAndDropManager.AddDragInfoHandler(searchResultsReadyToTest, OnDragInfo);
          RadDragAndDropManager.AddDragInfoHandler(searchResultsTestingComplete, OnDragInfo);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {

            btnSearchProjects.Click += new RoutedEventHandler(btnSearchProjects_Click);
        }

        void btnSearchProjects_Click(object sender, RoutedEventArgs e)
        {
            GeminiServiceReference1.GeminiService1Client searchProjWebService =
                 new GeminiSilverlight2.GeminiServiceReference1.GeminiService1Client();

            searchProjWebService.GetIssuesByProjCompleted +=
                new EventHandler<GeminiSilverlight2.GeminiServiceReference1.GetIssuesByProjCompletedEventArgs>
                    (searchProjWebService_GetIssuesByProjCompleted);
            searchProjWebService.GetIssuesByProjAsync(ProjectID.Text);
        }


        void searchProjWebService_GetIssuesByProjCompleted(object sender,
            GeminiSilverlight2.GeminiServiceReference1.GetIssuesByProjCompletedEventArgs e)
        {
            searchResultsTestingComplete.ItemsSource = e.Result;
            searchResultsLogged.ItemsSource = e.Result;
            searchResultsInProgress.ItemsSource = e.Result;
            searchResultsReadyToTest.ItemsSource = e.Result;

        }

        private IList<object> draggedItems;
        private void searchResults_RowLoaded(object sender, RowLoadedEventArgs e)
        {

        }

        private void radGridView_Grouping(object sender, Telerik.Windows.Controls.GridViewGroupingEventArgs e)
        {
            if (e.Index > 3 && e.Action == CollectionChangeAction.Add)
            {
                e.Cancel = true;
            }
        }


        private void EnableDropBehavior()
        {
            Telerik.Windows.Controls.DragDrop.RadDragAndDropManager.SetAllowDrop(searchResultsLogged, true);
            Telerik.Windows.Controls.DragDrop.RadDragAndDropManager.SetAllowDrop(searchResultsInProgress, true);
            Telerik.Windows.Controls.DragDrop.RadDragAndDropManager.SetAllowDrop(searchResultsReadyToTest, true);
            Telerik.Windows.Controls.DragDrop.RadDragAndDropManager.SetAllowDrop(searchResultsTestingComplete, true);
        }


        private void EnableDragBehavior()
        {
            Telerik.Windows.Controls.DragDrop.RadDragAndDropManager.SetAllowDrag(searchResultsLogged, true);
            Telerik.Windows.Controls.DragDrop.RadDragAndDropManager.SetAllowDrag(searchResultsInProgress, true);
            Telerik.Windows.Controls.DragDrop.RadDragAndDropManager.SetAllowDrag(searchResultsReadyToTest, true);
            Telerik.Windows.Controls.DragDrop.RadDragAndDropManager.SetAllowDrag(searchResultsTestingComplete, true);
        }

        //public IList<object> DraggedItems
        //{
        //    get
        //    {
        //        return this.draggedItems;
        //    }
        //    set
        //    {
        //        if (this.draggedItems != value)
        //        {
        //            this.draggedItems = value;
        //            OnPropertyChanged("DraggedItems");
        //        }
        //    }
        //}

        private void OnDragInfo(object sender, DragDropEventArgs e)
        {
            RadGridView gridView = sender as RadGridView;
            IEnumerable draggedItems = e.Options.Payload as IEnumerable;

            if (e.Options.Status == DragStatus.DragInProgress)
            {
                //Set up a drag cue:
                TreeViewDragCue cue = new TreeViewDragCue();
                //Here we need to choose a template for the items:
                //cue.ItemTemplate = this.Resources["ProductTemplate"] as DataTemplate;
                cue.ItemsSource = draggedItems;
                e.Options.DragCue = cue;
            }
            else if (e.Options.Status == DragStatus.DragComplete)
            {
                IList source = gridView.ItemsSource as IList;
                foreach (object draggedItem in draggedItems)
                {
                    source.Remove(draggedItem);
                }
            }
        }


        private void OnDragQuery(object sender, DragDropQueryEventArgs e)
        {
            RadGridView gridView = sender as RadGridView;
            if (gridView != null)
            {
                IList selectedItems = gridView.SelectedItems.ToList();
                e.QueryResult = selectedItems.Count > 0;
                e.Options.Payload = selectedItems;
            }

            e.QueryResult = true;
            e.Handled = true;
        }

        private void OnDropInfo(object sender, DragDropEventArgs e)
        {
            RadGridView order = e.Options.Destination as RadGridView;
            ICollection draggedItems = e.Options.Payload as ICollection;

            TreeViewDragCue cue = e.Options.DragCue as TreeViewDragCue;

            if (e.Options.Status == DragStatus.DropPossible)
            {
                // Set a suitable text:
                cue.DragActionContent = String.Format("Add {0} item{1}", draggedItems.Count, draggedItems.Count > 1 ? "s" : String.Empty);
                cue.IsDropPossible = true;
                //order.Background = this.Resources["DropPossibleBackground"] as Brush;
            }
            else if (e.Options.Status == DragStatus.DropImpossible)
            {
                cue.DragActionContent = null;
                cue.IsDropPossible = false;
            }
            else if (e.Options.Status == DragStatus.DropComplete)
            {
                IList items = order.ItemsSource as IList;
                foreach (object draggedItem in draggedItems)
                {
                    items.Add(draggedItem);
                }
            }

            if (e.Options.Status != DragStatus.DropPossible)
            {
                order.Background = new SolidColorBrush(Colors.White);
            }
        }

        private void OnDropQuery(object sender, DragDropQueryEventArgs e)
        {
            // We allow drop only if the dragged items are products:
            ICollection draggedItems = e.Options.Payload as ICollection;


            //if (e.Options.Status == DragStatus.DropComplete && e.Options.Payload != null && e.Options.Destination!= null)
            //{
            //    foreach (var item in e.Options.Payload.Where(item => item is BugViewModel).Cast<BugViewModel>())
            //    {
            //        item.Owner = destinationTeamMember;
            //    }
            //}
        }
  }

}

<UserControl xmlns:my2="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"  xmlns:my1="clr-namespace:Telerik.Windows.Controls.TreeView;assembly=Telerik.Windows.Controls.Navigation"  xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"  x:Class="GeminiSilverlight2.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:datacontrols="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    xmlns:controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    xmlns:grid="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
    xmlns:gridView="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"
    xmlns:navigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
    xmlns:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
    xmlns:telerikGrid="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
    xmlns:telerikData="clr-namespace:Telerik.Windows.Data;assembly=Telerik.Windows.Data"
    mc:Ignorable="d" d:DesignWidth="1024" d:DesignHeight= "768"
    xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    xmlns:telerikDragDrop="clr-namespace:Telerik.Windows.Controls.DragDrop;assembly=Telerik.Windows.Controls"
    xmlns:GeminiSilverlight2_GeminiServiceReference1="clr-namespace:GeminiSilverlight2.GeminiServiceReference1"
    xmlns:telerikAnimation="clr-namespace:Telerik.Windows.Controls.Animation;assembly=Telerik.Windows.Controls"
    xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
    xmlns:dragDrop="clr-namespace:Telerik.Windows.Controls.DragDrop;assembly=Telerik.Windows.Controls"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"
    xmlns:local="clr-namespace:GeminiSilverlight2">

    <UserControl.Resources>
        <GeminiSilverlight2_GeminiServiceReference1:gemini_issuesview x:Key="gemini_issuesviewDataSource" d:IsDataSource="True"/>

        <Style TargetType="telerik:GridViewRow" x:Key="OrderItemStyle">
            <Setter Property="dragDrop:RadDragAndDropManager.AllowDrag" Value="True" />
        </Style>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot">
       <Grid.Resources>
             <LinearGradientBrush x:Key="Office_BlackPictureFrame" EndPoint="0.491356224416577,0.974451988955925" StartPoint="0.777113682471078,-0.027352265088688">
                <GradientStop Color="#FF7D7D7D" Offset="0.032501"/>
                <GradientStop Color="#FF4D4D4D" Offset="0.036112000000000033"/>
                <GradientStop Color="#FF656565" Offset="0.065002"/>
                <GradientStop Color="#FF454545" Offset="0.068613000000000035"/>
                <GradientStop Color="#FF353535" Offset="0.72841"/>
                <GradientStop Color="#FF050505" Offset="0.987361"/>
                <GradientStop Color="#FF9F9F9F" Offset="0.54500001668930054"/>
                <GradientStop Color="#FF454545" Offset="0.381"/>
                <GradientStop Color="#FF1C1C1C" Offset="0.66"/>
            </LinearGradientBrush>

            <LinearGradientBrush x:Key="Office_BlackRowBackground" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF343639" Offset="1"/>
                <GradientStop Color="#FF373737" Offset="0"/>
                <GradientStop Color="#FF3A3B3D" Offset="0.15"/>
                <GradientStop Color="#FF121212" Offset="0.15"/>
            </LinearGradientBrush>

            <ControlTemplate x:Key="MyCustomRowTemplate" TargetType="telerik:GridViewRow">
                <Border x:Name="rowsContainer" Background="#FF525252" Padding="8,8,8,0">
                    <Border  x:Name="selectedRow"
                        BorderThickness="1" BorderBrush="#FF000000">

                        <Grid Width="350">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="30" />
                                <RowDefinition Height="50" />
                                <RowDefinition Height="50" />
                                <RowDefinition Height="50" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>

                            <TextBlock Text="Issue ID:"
                                       Grid.Column="0" Grid.Row="1"
                                       VerticalAlignment="Top" HorizontalAlignment="Left"
                                       Foreground="White" FontWeight="Bold" Margin="0,15,15,0" />

                            <TextBlock Text="Status:"
                                       Grid.Column="0" Grid.Row="2"
                                       VerticalAlignment="Top" HorizontalAlignment="Left"
                                       Foreground="White" FontWeight="Bold" Margin="0,15,15,0" />



                            <StackPanel Orientation="Horizontal" Grid.Column="0" Grid.ColumnSpan="3" Margin="15,0,15,0">

                                <TextBlock Text="Issue ID: "
                                           VerticalAlignment="Top" HorizontalAlignment="Left"
                                           Foreground="LightGray" FontSize="18" />

                                <TextBlock Text="{Binding issueid}"
                                           VerticalAlignment="Top" HorizontalAlignment="Left"
                                           Foreground="LightGray" FontSize="18" />

                            </StackPanel>

                            <TextBlock Text="{Binding issueid}"
                                       Grid.Column="1" Grid.Row="1"
                                       VerticalAlignment="Top" HorizontalAlignment="Left"
                                       Foreground="White"  Margin="0,15,15,0" />

                            <TextBlock Text="{Binding summary}"
                                       Grid.Column="1" Grid.Row="2"
                                       VerticalAlignment="Top" HorizontalAlignment="Left"
                                       Foreground="White"  Margin="0,15,15,0" />

                        </Grid>
                    </Border>
                </Border>
            </ControlTemplate>

            <Style x:Key="rowStyle" TargetType="telerik:GridViewRow">
                <Setter Property="Template" Value="{StaticResource MyCustomRowTemplate}" />
            </Style>
        </Grid.Resources>

        <Grid.RowDefinitions>
            <RowDefinition Height="65" />
            <RowDefinition Height="65" />
            <RowDefinition Height="65" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
           <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
         </Grid.ColumnDefinitions>

  <!--Section: Header Input-->
        <StackPanel Grid.Row="1" Grid.ColumnSpan="4" Orientation="Horizontal" Margin="0,0,0,25">
            <TextBox x:Name="ProjectID" Width="100" Height="30" VerticalAlignment="Top" Text="Project Code" TextWrapping="Wrap" RenderTransformOrigin="-0.13,-1.958"/>
            <Button x:Name="btnSearchProjects" HorizontalAlignment="Left" Margin="56,0,0,0" VerticalAlignment="Top" Width="75" Height="30" Content="Search"/>
        </StackPanel>
        <TextBlock Margin="73,10,73,0" VerticalAlignment="Top" HorizontalAlignment="Center" Grid.Column="0" Grid.Row="2" Text="Logged" TextWrapping="Wrap" />
        <TextBlock Margin="66,10,66,0" VerticalAlignment="Top" HorizontalAlignment="Center" Grid.Column="1" Grid.Row="2" Text="In Progress" TextWrapping="Wrap"/>
        <TextBlock Margin="59,10,60,0" VerticalAlignment="Top" HorizontalAlignment="Center" Grid.Column="2" Grid.Row="2" Text="Ready To Test" TextWrapping="Wrap"/>
        <TextBlock Margin="0,10,-30,0" VerticalAlignment="Top" HorizontalAlignment="Center" Grid.Column="3" Grid.Row="2" Text="Testing Complete" TextWrapping="Wrap"/>

<!--Section: Tiles-->
        <StackPanel Grid.Column="0" Grid.Row="3" Orientation="Horizontal">
            <telerikGrid:RadGridView x:Name="searchResultsLogged" AutoGenerateColumns="False" ItemsSource="{Binding Source={StaticResource gemini_issuesviewDataSource}}"
                                     telerikDragDrop:RadDragAndDropManager.AllowDrag="True"
                                     telerikDragDrop:RadDragAndDropManager.AllowDrop="True"
                                     GridLinesVisibility="None" Width="350"
                                      RowStyle="{StaticResource rowStyle}" UseAlternateRowStyle="False">


            <telerikGrid:RadGridView.Columns>
                <telerikGrid:GridViewDataColumn DataMemberBinding="{Binding issueid}"/>
                <telerikGrid:GridViewDataColumn DataMemberBinding="{Binding summary}"/>
             </telerikGrid:RadGridView.Columns>
                <telerikGrid:RadGridView.FilterDescriptors>
                   <telerikData:FilterDescriptor Member="statusdesc"
                                     Operator="IsEqualTo"
                                     Value="Logged"/>
                </telerikGrid:RadGridView.FilterDescriptors>
         </telerikGrid:RadGridView>
        </StackPanel>

        <StackPanel Grid.Column="1" Grid.Row="3" Orientation="Horizontal" >
            <telerikGrid:RadGridView x:Name="searchResultsInProgress" AutoGenerateColumns="False"
                                     ItemsSource="{Binding Source={StaticResource gemini_issuesviewDataSource}}"
                                     telerikDragDrop:RadDragAndDropManager.AllowDrag="True" telerikDragDrop:RadDragAndDropManager.AllowDrop="True"
                                     GridLinesVisibility="None" Width="350"
                                     RowStyle="{StaticResource rowStyle}" UseAlternateRowStyle="False">

            <telerikGrid:RadGridView.Columns>
                <telerikGrid:GridViewDataColumn DataMemberBinding="{Binding issueid}"/>
                <telerikGrid:GridViewDataColumn DataMemberBinding="{Binding summary}"/>
                </telerikGrid:RadGridView.Columns>
            <telerikGrid:RadGridView.FilterDescriptors>
                <telerikData:FilterDescriptor Member="statusdesc"
                                     Operator="IsEqualTo"
                                     Value="In Progress"/>
            </telerikGrid:RadGridView.FilterDescriptors>
        </telerikGrid:RadGridView>
</StackPanel>

        <StackPanel Grid.Column="2" Grid.Row="3" Orientation="Horizontal">
            <telerikGrid:RadGridView x:Name="searchResultsReadyToTest" AutoGenerateColumns="False"
                                     ItemsSource="{Binding Source={StaticResource gemini_issuesviewDataSource}}"
                                     telerikDragDrop:RadDragAndDropManager.AllowDrag="True" telerikDragDrop:RadDragAndDropManager.AllowDrop="True"
                                     GridLinesVisibility="None" Width="350"
                                      RowStyle="{StaticResource rowStyle}" UseAlternateRowStyle="False">

                <telerikGrid:RadGridView.Columns>
                    <telerikGrid:GridViewDataColumn DataMemberBinding="{Binding issueid}"/>
                    <telerikGrid:GridViewDataColumn DataMemberBinding="{Binding summary}"/>
                </telerikGrid:RadGridView.Columns>
                <telerikGrid:RadGridView.FilterDescriptors>
                    <telerikData:FilterDescriptor Member="statusdesc"
                                     Operator="IsEqualTo"
                                     Value="Ready to Test"/>
                </telerikGrid:RadGridView.FilterDescriptors>
            </telerikGrid:RadGridView>
        </StackPanel>

        <StackPanel Grid.Column="3" Grid.Row="3" Orientation="Horizontal">
            <telerikGrid:RadGridView x:Name="searchResultsTestingComplete" AutoGenerateColumns="False"
                                     ItemsSource="{Binding Source={StaticResource gemini_issuesviewDataSource}}"
                                     telerikDragDrop:RadDragAndDropManager.AllowDrag="True" telerikDragDrop:RadDragAndDropManager.AllowDrop="True"
                                     GridLinesVisibility="None" Width="350"
                                     RowStyle="{StaticResource rowStyle}" UseAlternateRowStyle="False">

                <telerikGrid:RadGridView.Columns>
                    <telerikGrid:GridViewDataColumn DataMemberBinding="{Binding issueid}"/>
                    <telerikGrid:GridViewDataColumn DataMemberBinding="{Binding summary}"/>
                </telerikGrid:RadGridView.Columns>
                <telerikGrid:RadGridView.FilterDescriptors>
                    <telerikData:FilterDescriptor Member="statusdesc"
                                     Operator="IsEqualTo"
                                     Value="Testing Complete (Pass)"/>
                </telerikGrid:RadGridView.FilterDescriptors>
            </telerikGrid:RadGridView>
        </StackPanel>

    </Grid>

</UserControl>

[Tyler Rendleman]

any help?

[Miroslav]

Hello Tyler Rendleman,

I am sorry for the delayed reply!

I browsed though your code and created a sample project that hopefully recreates what you are having, you can find it attached.

My suggestions:
- You can add the DragDrop handlers at a common parents, with routed events the handlers do not have to abe added at the objects they work on.
- The AllowDrag property was set on the grid views which allowed the user to drag them, even if the mouse was not dragging an issue item.
- The red icon appears during dragging because the DropQuery handler did not set the Query result. This method is sued to determine whether a drop is possible.

The original drag drop code assumed that items will be moved around the grids. In your case though all items are present in all grids and nothing will be moved around, just recategorized.

Hopefully the project will help you implement what you need.

Sincerely yours,
Miroslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.