How to make row drag and drop between DataGrid and other UWP control?
UWP DataGrid offers a built-in support for row drag and drop functionality by enabling SfDataGrid.AllowDraggingRows and AllowDrop property. This topic demonstrates row drag-and-drop operations between SfDataGrid with other controls.
<syncfusion:SfDataGrid x:Name="dataGrid" AllowDraggingRows="True" AllowDrop="True" LiveDataUpdateMode="AllowDataShaping" ItemsSource="{Binding UserDetails}" >
Row drag and drop between different controls
You can able to perform the row drag and drop between SfDataGrid with other control like ListView and others also. For this operation, you should override a RowDragDropController.ProcessOnDragOver and RowDragDropController.ProcessOnDrop to handle the drag and drop operations.
this.sfDataGrid.RowDragDropController = new GridRowDragDropControllerExt(); public class GridRowDragDropControllerExt : GridRowDragDropController { ObservableCollection<object> draggingRecords = new ObservableCollection<object>(); /// <summary> /// Occurs when the input system reports an underlying dragover event with this element as the potential drop target. /// </summary> /// <param name="args">An <see cref="T:Windows.UI.Xaml.DragEventArgs">DragEventArgs</see> that contains the event data.</param> /// <param name="rowColumnIndex">Specifies the row column index based on the mouse point.</param> protected override void ProcessOnDragOver(DragEventArgs args, RowColumnIndex rowColumnIndex) { if (args.DataView.Properties.ContainsKey("DraggedItem")) draggingRecords = args.DataView.Properties["DraggedItem"] as ObservableCollection<object>; else draggingRecords = args.DataView.Properties["Records"] as ObservableCollection<object>; if (draggingRecords == null) return; //To get the dropping position of the record var dropPosition = GetDropPosition(args, rowColumnIndex, draggingRecords); //To Show the draggable popup with the DropAbove/DropBelow?None message if (dropPosition == DropPosition.None) { CloseDragIndicators(); args.AcceptedOperation = DataPackageOperation.None; args.DragUIOverride.Caption = "Can't drop here"; return; } else if (dropPosition == DropPosition.DropAbove) { if (draggingRecords != null && draggingRecords.Count > 1) args.DragUIOverride.Caption = "Drop these " + draggingRecords.Count + " rows above"; else { args.AcceptedOperation = DataPackageOperation.Copy; args.DragUIOverride.IsCaptionVisible = true; args.DragUIOverride.IsContentVisible = true; args.DragUIOverride.IsGlyphVisible = true; args.DragUIOverride.Caption = "Drop above"; } } else { if (draggingRecords != null && draggingRecords.Count > 1) args.DragUIOverride.Caption = "Drop these " + draggingRecords.Count + " rows below"; else args.DragUIOverride.Caption = "Drop below"; } args.AcceptedOperation = DataPackageOperation.Move; //To Show the up and down indicators while dragging the row ShowDragIndicators(dropPosition, rowColumnIndex, args); args.Handled = true; } ListView listview; /// <summary> /// Occurs when the input system reports an underlying drop event with this element as the drop target. /// </summary> /// <param name="args">An <see cref="T:Windows.UI.Xaml.DragEventArgs">DragEventArgs</see> that contains the event data.</param> /// <param name="rowColumnIndex">Specifies the row column index based on the mouse point.</param> protected override void ProcessOnDrop(DragEventArgs args, RowColumnIndex rowColumnIndex) { listview = null; if (args.DataView.Properties.ContainsKey("ListView")) listview=args.DataView.Properties["ListView"] as ListView; if (!DataGrid.SelectionController.CurrentCellManager.CheckValidationAndEndEdit()) return; //To get the dropping position of the record var dropPosition = GetDropPosition(args, rowColumnIndex, draggingRecords); if (dropPosition == DropPosition.None) return; // to get the index of dropping record var droppingRecordIndex = this.DataGrid.ResolveToRecordIndex(rowColumnIndex.RowIndex); if (droppingRecordIndex < 0) return; // to insert the dragged records based on dragged position foreach (var record in draggingRecords) { if (listview != null) { (listview.ItemsSource as ObservableCollection<BusinessObjects>).Remove(record as BusinessObjects); var sourceCollection = this.DataGrid.View.SourceCollection as IList; if (dropPosition == DropPosition.DropBelow) sourceCollection.Insert(droppingRecordIndex + 1, record); else sourceCollection.Insert(droppingRecordIndex, record); } else { var draggingIndex = this.DataGrid.ResolveToRowIndex(draggingRecords[0]); if (draggingIndex < 0) { return; } // to get the index of dragging row var recordindex = this.DataGrid.ResolveToRecordIndex(draggingIndex); var recordEntry = this.DataGrid.View.Records[recordindex]; this.DataGrid.View.Records.Remove(recordEntry); // to insert the dragged records to particular position if (draggingIndex < rowColumnIndex.RowIndex && dropPosition == DropPosition.DropAbove) this.DataGrid.View.Records.Insert(droppingRecordIndex - 1, this.DataGrid.View.Records.CreateRecord(record)); else if (draggingIndex > rowColumnIndex.RowIndex && dropPosition == DropPosition.DropBelow) this.DataGrid.View.Records.Insert(droppingRecordIndex + 1, this.DataGrid.View.Records.CreateRecord(record)); else this.DataGrid.View.Records.Insert(droppingRecordIndex, this.DataGrid.View.Records.CreateRecord(record)); } } //Closes the Drag arrow indication all the rows CloseDragIndicators(); } }
You should set the AllowDrop property of the ListView as true while doing the drag and drop operation from SfDataGrid with ListView and wire the DragEnter, DragOver and Drop events of ListView to handle the row drag and drop operation.
<ListView x:Name="listView" AllowDrop="True" ItemsSource="{Binding OrderDetails1}" DisplayMemberPath="ShipName" >
By the DragEnter event you can set the specified AcceptedOperation by using DataPackageOperation as illustrated in the following code example.
this.listView.DragItemsStarting += ListView_DragItemsStarting; ObservableCollection<object> records1 = new ObservableCollection<object>(); /// <summary> /// to select and the dragging records /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void ListView_DragItemsStarting(object sender, DragItemsStartingEventArgs e) { var records = new ObservableCollection<object>(); records.Add(listView.SelectedItem); e.Data.Properties.Add("DraggedItem", records); e.Data.Properties.Add("ListView", listView); e.Data.SetText(StandardDataFormats.Text); } this.listView.DragOver += ListView_DragOver; /// <summary> /// to move the dragged items form the ListView control /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void ListView_DragOver(object sender, DragEventArgs e) { if (e.DataView.Properties.ContainsKey("Records")) records1 = e.DataView.Properties["Records"] as ObservableCollection<object>; } this.listView.DragEnter += ListView_DragEnter; /// <summary> /// to dragged and dropped the selected records in ListView control /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void ListView_DragEnter(object sender, DragEventArgs e) { e.AcceptedOperation = Windows.ApplicationModel.DataTransfer.DataPackageOperation.Copy; }
By handling the Drop event you can drop those items in to the ListView.
this.listView.Drop += ListView_Drop; this.listView.Drop += ListView_Drop; /// <summary> /// to add the dropped record in the ListView control /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void ListView_Drop(object sender, DragEventArgs e) { foreach (var item in records1) { this.datagrid.View.Remove(item as BusinessObjects); (this.DataContext as ViewModel).GDCSource1.Add(item as BusinessObjects); } }
The following screenshot shows dragging records from ListView and dropping in SfDataGrid.
Sample:
Conclusion
I hope you enjoyed learning on how make row drag and drop between DataGrid and other UWP control.
You can refer to our UWP DataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our UWP DataGrid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!