Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Drag-and-Drop Between GridControl and Other Controls

  • 5 minutes to read

The GridControl allows dragging records and dropping them in external controls. This topic demonstrates how to implement drag-and-drop between the GridControl and other controls that do not have a built-in drag-and-drop functionality.

The following image shows dragging records to and from the custom TextBlock:

View Example: How to implement drag-and-drop between the GridControl and other controls

#Steps 1-2. Add Controls

  1. Add the GridControl to your project’s window:

    <dxg:GridControl Name="gridControl">
       <dxg:GridControl.Columns>
          <dxg:GridColumn FieldName="ID" ReadOnly="True"/>
          <dxg:GridColumn FieldName="Name" ReadOnly="True"/>
          <dxg:GridColumn FieldName="Department" ReadOnly="True"/>
          <dxg:GridColumn FieldName="Position" ReadOnly="True"/>
       </dxg:GridControl.Columns>
       <dxg:GridControl.View>
          <dxg:TableView AutoWidth="True" />
       </dxg:GridControl.View>
    </dxg:GridControl>
    
  2. Add the TextBlock to your project’s window. The code sample below demonstrates the TextBlock with custom settings:

    <TextBlock Name="textBlock">            
       <UniformGrid Columns="2">                    
          <Label Content="Name:" />
          <TextBox Text="{Binding Name}" />
          <Label Content="Department:" />
          <TextBox Text="{Binding Department}" />
          <Label Content="Position:" />
          <TextBox Text="{Binding Position}" />
       </UniformGrid>
    </TextBlock>
    

#Steps 3-6. Implement Drag-and-Drop from the GridControl to the TextBlock

  1. Set the DataViewBase.AllowDragDrop property to true to enable drag-and-drop in the GridControl:

    <dxg:GridControl Name="gridControl"> 
       <!----> 
       <dxg:GridControl.View> 
          <dxg:TableView AllowDragDrop="True" />
       </dxg:GridControl.View> 
    </dxg:GridControl>
    
  2. Set the UIElement.AllowDrop property to true to allow dropping records in the TextBlock.

    <TextBlock Name="textBlock" AllowDrop="True" />
    
  3. Process dropped data and specify the TextBlock‘s content:

    <TextBlock Name="textBlock" AllowDrop="True" DragOver="OnDragOver" DragLeave="OnDragLeave" Drop="OnDrop" />
    
    void OnDrop(object sender, DragEventArgs e) {
       if (e.Data.GetDataPresent(typeof(RecordDragDropData))) {
          TextBlock textBlock = (TextBlock)sender;
          object data = e.Data.GetData(typeof(RecordDragDropData));
          object[] employees = ((RecordDragDropData)data).Records;
          textBlock.DataContext = (Employee)((IList)employees)[0];
       }
    }
    
  4. You can add actions that are performed during dragging. Use the DragDrop.DragEnter and DragDrop.DragLeave events on the TextBlock to indicate a drop target. The code sample below demonstrates how to change the TextBlock’s background color when dragging records into/out of the TextBlock:

    <TextBlock Name="textBlock" AllowDrop="True" DragOver="OnDragOver" DragLeave="OnDragLeave" />
    
    void OnDragEnter(object sender, DragEventArgs e) {
       if (e.Data.GetDataPresent(typeof(RecordDragDropData))) {
          TextBlock textBlock = (TextBlock)sender;                
          textBlock.Background = Brushes.SkyBlue;
          e.Handled = true;
       }
    }
    void OnDragLeave(object sender, DragEventArgs e) {
       TextBlock textBlock = (TextBlock)sender;
       textBlock.Background = null;
       textBlock.DataContext = null;
       e.Handled = true;
    }
    

#Steps 7-9. Implement Drag-and-Drop from the TextBlock to the GridControl

  1. The TextBlock can be a drag source. Complete the following tasks to initiate a drag-and-drop operation:

    The code sample below demonstrates how to initiate a drag-and-drop operation when the TextBlock is clicked. The TextBlock’s data context is used as the data to be transferred:

    <TextBlock Name="textBlock" AllowDrop="True" DragOver="OnDragOver" DragLeave="OnDragLeave" Drop="OnDrop" 
               PreviewMouseLeftButtonDown="OnPreviewMouseLeftButtonDown" />
    
    void OnPreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e) {
       TextBlock textBlock = (TextBlock)sender;
       if (textBlock.DataContext != null) {
          DragDrop.DoDragDrop(textBlock, textBlock.DataContext, DragDropEffects.Move);
       }
    }
    
  2. Now you can drag data from the TextBlock but not drop it in the GridControl. Perform the following steps to allow dropping:

    <dxg:GridControl Name="gridControl"> 
       <!----> 
       <dxg:GridControl.View> 
          <dxg:TableView AllowDragDrop="True" DragRecordOver="OnDragRecordOver" />
       </dxg:GridControl.View> 
    </dxg:GridControl>
    
    void OnDragRecordOver(object sender, DragRecordOverEventArgs e) {
       if (e.IsFromOutside && e.Data.GetDataPresent(typeof(Employee))) {
          e.Effects = DragDropEffects.Move;
          e.Handled = true;
       }
    }
    
  3. Complete the following actions to process dropped data:

    <dxg:GridControl Name="gridControl"> 
       <!----> 
       <dxg:GridControl.View> 
          <dxg:TableView AllowDragDrop="True" DragRecordOver="OnDragRecordOver" DropRecord="OnDropRecord" />
       </dxg:GridControl.View> 
    </dxg:GridControl>
    
    void OnDropRecord(object sender, DropRecordEventArgs e) {
       if (e.IsFromOutside && e.Data.GetDataPresent(typeof(Employee))) {
          object data = e.Data.GetData(typeof(Employee));
          Employee employee = (Employee)data;
          e.Data.SetData(new RecordDragDropData(new List<Employee>() { employee }.ToArray()));
       }
    }
    
See Also