From 2d6ac083eb05a4184ae178327658cbcb903a4303 Mon Sep 17 00:00:00 2001 From: SwathiDhatchanamoorthi Date: Fri, 11 Nov 2022 16:35:02 +0530 Subject: [PATCH] WF-64705 - Updated the README file --- README.md | 195 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 193 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c3fc145..b62535f 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,193 @@ -# How to drag and drop rows between datagrid and listview in wpf? -This example illustrates how to drag and drop rows between datagrid and listview in wpf +# How to make drag and drop between the WPF DataGrid (SfDataGrid) with other controls + +[WPF DataGrid](https://www.syncfusion.com/wpf-controls/datagrid) (SfDataGrid) offers a built-in support for row drag and drop functionality by enabling SfDataGrid.AllowDraggingRows and [AllowDrop](https://learn.microsoft.com/en-us/dotnet/api/system.windows.uielement.allowdrop?view=windowsdesktop-7.0) property. This topic demonstrates row drag-and-drop operations between SfDataGrid with other controls. + +``` + +``` + +## Row drag and drop between different controls + +You can be able to perform the row drag and drop between SfDataGrid with other control like [ListView](https://docs.microsoft.com/en-us/dotnet/framework/wpf/controls/listview-overview) 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 draggingRecords = new ObservableCollection(); + + /// + /// Occurs when the input system reports an underlying dragover event with this element as the potential drop target. + /// + /// An DragEventArgs that contains the event data. + /// Specifies the row column index based on the mouse point. + protected override void ProcessOnDragOver(DragEventArgs args, RowColumnIndex rowColumnIndex) + { + if (args.Data.GetDataPresent("ListViewRecords")) + draggingRecords = args.Data.GetData("ListViewRecords") as ObservableCollection; + else + draggingRecords = args.Data.GetData("Records") as ObservableCollection; + + 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 message + ShowDragDropPopup(dropPosition, draggingRecords, args); + //To Show the up and down indicators while dragging the row + ShowDragIndicators(dropPosition, rowColumnIndex, args); + + args.Handled = true; + } + + ListView listview; + + /// + /// Occurs when the input system reports an underlying drop event with this element as the drop target. + /// + /// An DragEventArgs that contains the event data. + /// Specifies the row column index based on the mouse point. + protected override void ProcessOnDrop(DragEventArgs args, RowColumnIndex rowColumnIndex) + { + if (args.Data.GetDataPresent("ListView")) + listview = args.Data.GetData("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).Remove(record as Orders); + 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); + // to ger the record based on index + 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(); + //Closes the Drag arrow indication all the rows + CloseDraggablePopUp(); + } +} +``` +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 PreviewMouseMove, DragOver and Drop events of ListView to handle the row drag and drop operation. + +``` + +``` +By the PreviewMouseMove event you can set the specified DragDropEffects by using [DragAndDrop](https://docs.microsoft.com/en-us/dotnet/desktop/wpf/advanced/drag-and-drop-overview?view=netframeworkdesktop-4.8) as illustrated in the following code example. + +``` +this.listView.PreviewMouseMove += ListView_PreviewMouseMove; +this.listView.DragOver += ListView_DragOver; + +/// +/// to select and dragged the record from ListView to other control +/// +/// +/// +private void ListView_PreviewMouseMove(object sender, MouseEventArgs e) +{ + if (e.LeftButton == MouseButtonState.Pressed) + { + ListBox dragSource = null; + var records = new ObservableCollection(); + ListBox parent = (ListBox)sender; + dragSource = parent; + object data = GetDataFromListBox(dragSource, e.GetPosition(parent)); + + records.Add(data); + + var dataObject = new DataObject(); + dataObject.SetData("ListViewRecords", records); + dataObject.SetData("ListView", listView); + + if (data != null) + { + DragDrop.DoDragDrop(parent, dataObject, DragDropEffects.Move); + } + } + e.Handled = true; +} + + +/// +/// to move the dragged items form the ListView control +/// +/// +/// +private void ListView_DragOver(object sender, DragEventArgs e) +{ + if (e.Data.GetDataPresent("Records")) + records = e.Data.GetData("Records") as ObservableCollection; +} +``` +By handling the Drop event you can drop those items in to the ListView. + +``` +this.listView.Drop += ListView_Drop; + +/// +/// to add the dropped records in the ListView control +/// +/// +/// +private void ListView_Drop(object sender, DragEventArgs e) +{ + foreach (var item in records) + { + this.sfDataGrid.View.Remove(item as Orders); + + (this.DataContext as ViewModel).OrderDetails1.Add(item as Orders); + } +} +``` \ No newline at end of file