Drag and Drop a Carousel Item

[Carl Brown]

I am investigating whether I can use the selectedItem property from the Carousel and use it with the DrapAndDropManager in order to drag the item to a listbox? Similar to the examples, but with the Carousel.

I tried using the example and applying it to the Carousel control, but I keep getting the error "Cannot convert type 'System.Windows.Controls.ItemsControl' to 'Telerik.Windows.Controls.RadCarousel' via a reference conversion, boxing conversion, unboxing conversion, wrapping conversion, or null type conversion". when I set up the drag event handler.

Please advise on how I should handle this. I've attached a copy of my code.

    private void OnNurseDragQuery(object sender, DragDropQueryEventArgs e)
        {
            CarouselItem nurseItem = e.Options.Source as CarouselItem;

            RadCarousel carousel = CarouselItemsControl.ItemsControlFromItemContainer(nurseItem) as RadCarousel;

            if (e.Options.Status == DragStatus.DragQuery && nurseItem != null)
            {
                e.Options.Payload = carousel.SelectedItem;
                ContentControl cue = new ContentControl();
                cue.ContentTemplate = this.Resources["ApplicationDragTemplate"] as DataTemplate;
                cue.Content = carousel.SelectedItem;
                e.Options.DragCue = cue;
                e.Options.ArrowCue = RadDragAndDropManager.GenerateArrowCue();
            }

            e.QueryResult = true;


       }

Well, since I've made this post, I've figured out to use the carouselpanel inside a listview which is working just fine, I just now need to get the listBox that I'm dragging to, to accept the drop. the code runs, but I never get the Drag.Status.DragComplete action to work.

[Milan]

Hello Carl Brown,

You could use our ParentOfType extension method to easily access the parent ItemsControl.The code is pretty much the same when using RadCarousel or an ItemsControl.

<Grid>
    <Grid.Resources>
        <!-- Allow drag and drop of CarouselItem and ListBoxItem -->
        <Style TargetType="telerik:CarouselItem">
            <Setter Property="dragDrop:RadDragAndDropManager.AllowDrag" Value="True"/>
            <Setter Property="dragDrop:RadDragAndDropManager.AllowDrop" Value="True"/>
        </Style>
        <Style TargetType="ListBoxItem">
            <Setter Property="dragDrop:RadDragAndDropManager.AllowDrag" Value="True"/>
            <Setter Property="dragDrop:RadDragAndDropManager.AllowDrop" Value="True"/>
        </Style>
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <telerik:RadCarousel x:Name="RadCarousel1" Grid.Row="0"/>
    <ListBox x:Name="listBox" Grid.Row="1">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <telerik:RadCarouselPanel></telerik:RadCarouselPanel>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>
</Grid>

And finally the code:

// required namespace: Telerik.Windows.Controls
public Window1()
{
    InitializeComponent();

    this.RadCarousel1.ItemsSource = data;
    this.listBox.ItemsSource = data;

    RadDragAndDropManager.AddDragInfoHandler(this.RadCarousel1, new EventHandler<DragDropEventArgs>(OnDragInfoCarousel));
    RadDragAndDropManager.AddDragQueryHandler(this.RadCarousel1, new EventHandler<DragDropQueryEventArgs>(OnDragQueryCarousel));

    RadDragAndDropManager.AddDragInfoHandler(this.listBox, new EventHandler<DragDropEventArgs>(OnDragInfoListBox));
    RadDragAndDropManager.AddDragQueryHandler(this.listBox, new EventHandler<DragDropQueryEventArgs>(OnDragQueryListBox));
}

private void OnDragQueryListBox(object sender, DragDropQueryEventArgs e)
{
    ListBoxItem nurseItem = e.Options.Source as ListBoxItem;
    ListBox listBox = nurseItem.ParentOfType<ListBox>();
}

private void OnDragQueryCarousel(object sender, DragDropQueryEventArgs e)
{
    CarouselItem nurseItem = e.Options.Source as CarouselItem;
    RadCarousel carousel = nurseItem.ParentOfType<RadCarousel>();
}

Hope this helps.

All the best,
Milan
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Carl Brown]

That code you provided worked great. Thank you. I have another question that is related, on the DropInfo and DropQuery events. How do I convert from the CarouselItem to the ListBoxItem? Or vice versa? I've included a little code to support my question. The Listbox item that I'm creating an instance of is coming back null although I'm associating it with the e.options.source which is a CarouselItem.

 private void On1stleftNurse1DropInfo(object sender, DragDropEventArgs e)
        {
            ListBoxItem viewItem = e.Options.Source as ListBoxItem;
            ListBox viewList = viewItem.ParentOfType<ListBox>();
            UnitMonitor.Service.HealthProListCrudService ProListService = new UnitMonitor.Service.HealthProListCrudService();
            List<UnitMonitor.Common.DataContracts.HealthProListValueObject> qry = new List<HealthProListValueObject>();
            IList<HealthProListValueObject> itemsSource =qry;
            HealthProListValueObject payload = e.Options.Payload as HealthProListValueObject;

            if (e.Options.Status == DragStatus.DropPossible)
            {
                viewList.BorderBrush = viewDragPossible;
                e.Handled=true;
            }

            else
            {
                viewList.BorderBrush = new SolidColorBrush(Colors.Gray);
            }

            if (e.Options.Status == DragStatus.DragComplete)
            {
                var listbox = e.Options.Destination as ListBox;
                var itemSource = listbox.ItemsSource as System.Collections.IList;
                var operation = e.Options.Payload as DragDropOperation;
                 itemSource.Add(operation.Payload);

            }

        }

[Milan]

Hello Carl Brown,

I am not sure that you need to convert CarouselItem to ListBoxItem or vice-versa.  I guess you only need the data item to complete the drop operation - you could easily get the data item from the DataContext property of the item that is being dragged, no matter if it is a CarouselItem or ListBoxItem. After you have the data item you should just add it to the source collection of the ListBox or RadCarousel

private void On1stleftNurse1DropInfo(object sender, DragDropEventArgs e)
{
    var draggedDataItem = ((FrameworkElement)e.Options.Source).DataContext;

    // ...
    // add data item to ListBox or RadCarousel using e.Options.Destination

}

I hope this makes sense.

Kind regards,
Milan
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Carl Brown]

I appreciate all of your help and have been successful at creating the Drag and Drop process that I was looking for. I am having an issue with inconsistency of the object that is being dragged. For some reason, one particular object seems to work most if not all the time and the others work sporadically. I'm not sure what it is, maybe the size of images(byte[]) within the object maybe? Here's some code, I'm really stuck on this one.

        private void loadData()
        {
             UnitMonitor.Service.HealthProListCrudService ProListService = new UnitMonitor.Service.HealthProListCrudService();
            List<UnitMonitor.Common.DataContracts.HealthProListValueObject> qry = ProListService.GetAllQuerable(0, 0, "LastName", true);

            nurseCarousel.ItemsSource = qry;
        }

        #region EventHandlers
        private void OnDragInfonurseCarousel(object sender, DragDropEventArgs e)
        {
             CarouselItem nurseItem = e.Options.Source as CarouselItem;
             RadCarousel carousel = nurseItem.ParentOfType<RadCarousel>();


             if (e.Options.Status == DragStatus.DragInProgress)
             {


             }




        }

        private void OnDragQuerynurseCarousel(object sender, DragDropQueryEventArgs e)
        {
            CarouselItem nurseItem = e.Options.Source as CarouselItem;
            RadCarousel carousel = nurseItem.ParentOfType<RadCarousel>();

            if (e.Options.Status == DragStatus.DragQuery && carousel != null)
            {
                e.Options.Payload = carousel.SelectedItem;
                ContentControl cue = new ContentControl();
                cue.ContentTemplate = this.Resources["ApplicationDragTemplate"] as DataTemplate;
                cue.Content = carousel.SelectedItem;
                e.Options.DragCue = cue;
                e.Options.ArrowCue = RadDragAndDropManager.GenerateArrowCue();
            }

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

        }


        private void On1stleftNurse1DropQuery(object sender, DragDropQueryEventArgs e)
        {
            if (e.Options.Status == DragStatus.DropDestinationQuery)
            {
                //ListBoxItem nurseItem = e.Options.Source as ListBoxItem;
                //ListBox listBox = nurseItem.ParentOfType<ListBox>();
                HealthProListValueObject payload = e.Options.Payload as HealthProListValueObject;
                //UnitMonitor.Service.HealthProListCrudService ProListService = new UnitMonitor.Service.HealthProListCrudService();
                List<HealthProListValueObject> qry = new List<HealthProListValueObject>();
                ItemsControl view = e.Options.Destination as ItemsControl;
                IList<HealthProListValueObject> itemsSource = qry;

                    e.QueryResult = payload != null && !itemsSource.Contains(payload);
                    e.Handled = true;

            }

        }

        private void On1stleftNurse1DropInfo(object sender, DragDropEventArgs e)
        {
            ItemsControl viewList = e.Options.Destination as ItemsControl;
            //UnitMonitor.Service.HealthProListCrudService ProListService = new UnitMonitor.Service.HealthProListCrudService();
            List<HealthProListValueObject> itemsSource =new List<HealthProListValueObject>();
            HealthProListValueObject payload = e.Options.Payload as HealthProListValueObject;


            if (e.Options.Status == DragStatus.DropPossible)
            {
                if (viewList != null)
                {
                    viewList.BorderBrush = viewDragPossible;
                    e.Handled = true;
                }
            }

            else
            {
                if (viewList != null)
                {
                    viewList.BorderBrush = new SolidColorBrush(Colors.Gold);
                }
            }

            if (e.Options.Status == DragStatus.DropComplete)
            {
              if (viewList != null)
                {

                    if (!itemsSource.Contains(payload))
                    {
                        if (viewList.Items.Count > 0)
                        {
                            MessageBoxResult result = MessageBox.Show("There is a nurse added to this unit already, are you sure?", "Already Assigned!", MessageBoxButton.YesNoCancel);
                            if (result == MessageBoxResult.Yes)
                            {

                                if (viewList.ItemsSource != null && (viewList.ItemsSource as System.Collections.IList).Count > 0)
                                {
                                    (viewList.ItemsSource as System.Collections.IList).Clear();
                                }
                                itemsSource.Insert(0,payload);
                                viewList.ItemsSource = itemsSource;
                            }

                        }
                    }

                    if (viewList != null)
                    {

                        if (viewList.Items.Count == 0)
                        {
                            itemsSource.Add(payload);
                            viewList.ItemsSource = itemsSource;
                        }
                    }

                           loadData();
                }

            }

        }

[Milan]

Hello Carl Brown,

Is it possible to send us the working application itself so that we have a better chance to reproduce the problem? 

Best wishes,
Milan
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.