We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Saving DataTable ItemSource after drag and drop functionality


I am using DataTable as a data souce for my SfDataGrid. I have reorder of columns and rows via drag and drop, but somehow this change does not update binded data source.

How can I achieve saving of reordered columns and row within DataTable?

Thank you in advance.

3 Replies

SP Shobika Palani Syncfusion Team October 25, 2019 04:52 PM UTC

Hi Aleksander, 

Thank you for contacting Syncfusion Support. 

We have analyzed your query to re-order rows and columns in underlying datatable based on the visual order after drag and drop. This requirement can be achieved by handling RowDragDropController.Dropped event and QueryColumnDragging event. 

  1. Reordering of rows
Please refer to the below code snippet to reorder rows based on visual order after drag and drop 
this.datagrid.RowDragDropController.Dropped += RowDragDropController_Dropped; 
private void RowDragDropController_Dropped(object sender, GridRowDroppedEventArgs e) 
            if (e.DropPosition != DropPosition.None) 
                //Get Dragging records  
                ObservableCollection<object> draggingRecords = e.Data.GetData("Records") as ObservableCollection<object>; 
                //Gets the TargetRecord from the underlying collection using record index of the TargetRecord (e.TargetRecord)  
                var targetRow = viewModel.GridItemSource.Rows[(int)e.TargetRecord]; 
                ////Use Batch update to avoid data operatons in SfDataGrid during records removing and inserting  
                var dataCollection = new List<object>(); 
                ////Removes the dragging records from the underlying collection  
                foreach (DataRowView item in draggingRecords) 
                    List<object> rowData = new List<object>(); 
                    foreach (var column in item.Row.ItemArray) 
                //Find the target record index after removing the records  
                int targetIndex = viewModel.GridItemSource.Rows.IndexOf(targetRow); 
                int insertionIndex = e.DropPosition == DropPosition.DropAbove ? targetIndex : targetIndex + 1; 
                insertionIndex = insertionIndex < 0 ? 0 : insertionIndex; 
                //Insert dragging records to the target position  
                for (int i = draggingRecords.Count - 1; i >= 0; i--) 
                    var newRow = viewModel.GridItemSource.NewRow(); 
                    var rowValues = dataCollection[i] as List<object>; 
                    for (int j = 0; j < rowValues.Count; j++) 
                        newRow[j] = rowValues[j]; 
                    viewModel.GridItemSource.Rows.InsertAt(newRow, insertionIndex); 
  1. Reordering of columns
Please refer to the below code snippet to reorder columns based on visual order after drag and drop 
this.datagrid.QueryColumnDragging += Datagrid_QueryColumnDragging; 
private void Datagrid_QueryColumnDragging(object sender, QueryColumnDraggingEventArgs e) 
            if(e.Reason == QueryColumnDraggingReason.Dropped) 
                var droppedColumn = viewModel.GridItemSource.Columns[e.From]; 
Also we have prepared demo sample to achieve your requirement and please find it from the link below 

Demo Link: 

Please let us know, if you need any further assistance on this. 


AZ Aleksander Zotov October 28, 2019 02:05 PM UTC

Thank you very much!

Everything worked perfectly!

FP Farjana Parveen Ayubb Syncfusion Team October 29, 2019 05:31 AM UTC

Hi Aleksander 
Thanks for the update. 
We are glad to know that the reported problem has been resolved at your end. Please let us know if you have any further queries on this. We are happy to help you. 
Farjana Parveen A 

Live Chat Icon For mobile
Up arrow icon