How to drag and drop items between controls

Dragging is a common operation in composite UI controls like Grid, TreeView etc, which most of the GrapeCity controls facilitate by default. However, a very common requirement is to drag an item from one control to a different control, which is possible using C1DragDropManager class.

So how do we perform drag and drop without losing formatting? The key to this is realizing that dragging the item loses formatting, but inside, the object still contains that information. So if the item can be reformatted in the target control, we can resurrect the item layout we want.

Get the full sample

Let’s say an ecommerce application has apparel items in a TreeView, grouped by their category. TreeView currently contains item images. But if we drag and drop the items, the images are lost. So, in order to get them back, we would format the target control, which is a FlexGrid:

We can further extend details (units, total price, etc.) of the dropped item to create a view that acts as a cart menu for the end-user.

Step 1: Implement drag and drop

We start by dragging an item from TreeView and dropping it over FlexGrid. For allowing dragging TreeView items, we use C1DragDropManager’s RegisterDragSource method.

_dragDropMng.RegisterDragSource(SampleTreeView, DragDropEffect.Copy, ModifierKeys.None,true);

Similarly, for allowing dropping over FlexGrid, RegisterDropTarget method can be used.

_dragDropMng.RegisterDropTarget(SampleGrid, true);

Now you can drag TreeView, but this allows dragging complete Item groups and the TreeView itself; we want the end users to be able to drag only sub-items.

For this, we need to use C1DragDropManager’s DragStart event for deciding the dragging action.

private void Ddm_DragStart(object source, DragDropEventArgs e)
        {
            if((e.DragSource as C1TreeView) !=null)
            {
                e.Effect = DragDropEffect.None;
            }

            if((e.DragSource as C1TreeViewItem) !=null && (e.DragSource as C1TreeViewItem).HasItems)
            {
                e.Effect = DragDropEffect.None;
            }        
        }

Similarly, using DragDrop event, we can control what happens when item drops.

Step 2: Format the target control to show the item

Now, once the item is dropped it will be shown in a raw form with item’s image missing. To extract the image from dropped item object, we need to format FlexGrid. This can be done by creating a custom converter inherited from IValueConverter, which can be used with the help of custom CellFactory.

  public class MyImageConverter: IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            string path = null;
            path = value.ToString();
            if(path != null)

            {
                var uri = string.Format("pack://application:,,,/Logos/{0}.png",path); 
                return new BitmapImage(new Uri(uri));
            }
            return null;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

public class MyCellFactory: C1.WPF.FlexGrid.CellFactory
    {
        public override void CreateCellContent(C1FlexGrid grid, Border bdr, CellRange rng)
        {
            var col = grid.Columns[rng.Column];
            var row = grid.Rows[rng.Row];
            if (col.ColumnName == "Brand")
            {
                var binding = new Binding();
                binding.Path = new PropertyPath("BrandName");
                binding.Converter = new MyImageConverter();  //use custom-converter to show Brand Logo matching BrandName

                var img = new Image();
                img.SetBinding(Image.SourceProperty, binding);                 

                bdr.Child = img;
                bdr.Height = 100;
            }
    }

To further create a view extending the item details, we can format FlexGrid - for instance, translate column values to a different display value, add unbound columns showing the units of dropped item, and much more.

Get the full sample