Table of Contents

Drag & drop

Reorder columns or rows inside the grid, drag data between grids, and accept files from the operating system.

Overview

TTMSFNCDataGrid supports several drag scenarios:

Scenario Main settings
Reorder columns Options.Mouse.ColumnDragging := True
Reorder rows Options.Mouse.RowDragging := True
Drag outside the grid Options.Mouse.DragMode := gdmDrag
Drop files from the OS AcceptDropFiles := True
Hidden-column management ShowColumnsEditor

Reorder columns and rows

Grid.Options.Mouse.ColumnDragging := True;
Grid.Options.Mouse.RowDragging := True;

The user starts the drag from a column or row and drops it at the target position.

DataGrid with row and column dragging enabled DataGrid with row and column dragging enabled (dark theme)

Use the drag/drop decision events to control what can move:

Event Use it for
OnCanDragRow / OnCanDragColumn Prevent dragging protected rows or columns.
OnCanDropRow / OnCanDropColumn Prevent dropping into invalid positions.
OnRowDropped / OnColumnDropped Persist the new order or update related UI.

Drag outside the grid

By default, dragging is handled internally by the grid. To participate in the framework drag/drop events, enable drag mode:

Grid.Options.Mouse.DragMode := gdmDrag;

Example: move a column from one grid to another.

procedure TForm1.DestinationGridDragDrop(Sender: TObject;
  const Data: TDragObject; const Point: TPointF);
var
  Cell: TTMSFNCDataGridCellCoord;
begin
  if Data.Source = SourceGrid then
  begin
    Cell := SourceGrid.DragCell;
    SourceGrid.Root.CopyColumnTo(
      Cell.Column,
      DestinationGrid.Root,
      DestinationGrid.XYToColumn(Point.X, Point.Y));
    SourceGrid.DeleteColumn(Cell.Column);
    SourceGrid.ResetDrag;
  end;
end;

Columns editor entry point

Use the columns editor to let users drag hidden columns back into the grid or manage column visibility.

Grid.LoadSampleData;
Grid.HideColumn(2);
Grid.HideColumn(3);
Grid.Options.Mouse.ColumnDragging := True;
Grid.Options.Mouse.DragMode := gdmDrag;
Grid.ShowColumnsEditor;
DataGrid with column drag styling and a Columns action DataGrid with column drag styling and a Columns action (dark theme)

The screenshot shows the grid configured with a Columns action. Adjust the dialog behavior with the editor options:

Grid.ColumnsEditor.Options.EnableDragDrop := False;
Grid.ColumnsEditor.Options.Mode := gcemAll;
DataGrid configured for drag-and-drop workflows DataGrid configured for drag-and-drop workflows (dark theme)

Drop files

Set AcceptDropFiles to allow files to be dropped from the operating system.

Grid.AcceptDropFiles := True;

Then handle OnDropFiles:

procedure TForm1.GridDropFiles(Sender: TObject;
  ADropFiles: TTMSFNCCustomControlDropFiles);
var
  FileName: string;
begin
  if ADropFiles.Files.Count = 0 then
    Exit;

  FileName := ADropFiles.Files[0];
  if SameText(ExtractFileExt(FileName), '.csv') then
  begin
    Grid.Clear;
    Grid.LoadFromCSVData(FileName);
  end;
end;

Use the framework drag-over event to accept only the file types your application can handle.

Customizing the drag indicator

When the user drags a row or column, the grid draws a semi-transparent rectangle over the source item and a coloured drop-line at the target position. Both are styled through DragAppearance:

Grid.DragAppearance.Fill.Color   := $200080FF;   // semi-transparent blue overlay
Grid.DragAppearance.Stroke.Color := $FF0080FF;   // solid blue drop-line
Grid.DragAppearance.Size         := 3;            // line thickness in pixels

TTMSFNCDataGridDragAppearance properties:

Property Type Description
Fill TTMSFNCGraphicsFill Fill of the semi-transparent rectangle drawn over the dragged item.
Stroke TTMSFNCGraphicsStroke Stroke of the drop-position indicator line.
Size Single Width of the drop-line in pixels. Default is 2.

Combining reordering, file drops, and drag indicator styling

For data-entry tools, it is common to let users reorder columns, drag rows into a useful order, and drop a CSV file to refresh the data. Keep those settings together during initialization so the drag affordance, operating-system file drops, and in-grid reorder behavior do not drift apart.

procedure TForm1.FormCreate(Sender: TObject);
begin
  Grid.Options.Mouse.ColumnDragging := True;
  Grid.Options.Mouse.RowDragging := True;
  Grid.AcceptDropFiles := True;
  Grid.OnDropFiles := GridDropFiles;

  Grid.DragAppearance.Fill.Color := $200080FF;
  Grid.DragAppearance.Stroke.Color := $FF0080FF;
  Grid.DragAppearance.Size := 3;
end;

procedure TForm1.GridDropFiles(Sender: TObject;
  ADropFiles: TTMSFNCCustomControlDropFiles);
begin
  if ADropFiles.Count > 0 then
    Grid.LoadFromCSVData(ADropFiles[0]);
end;
  • TTMSFNCDataGrid.Options.Mouse.ColumnDragging
  • TTMSFNCDataGrid.Options.Mouse.RowDragging
  • TTMSFNCDataGrid.Options.Mouse.DragMode
  • TTMSFNCDataGrid.DragCell
  • TTMSFNCDataGrid.ResetDrag
  • TTMSFNCDataGrid.AcceptDropFiles
  • TTMSFNCDataGrid.ShowColumnsEditor
  • TTMSFNCDataGrid.ColumnsEditor
  • TTMSFNCDataGrid.DragAppearance — TTMSFNCDataGridDragAppearance; drag indicator fill, stroke, and size.
  • OnCanDragRow / OnCanDragColumn
  • OnCanDropRow / OnCanDropColumn
  • OnRowDropped / OnColumnDropped
  • OnDropFiles

See also