Interaction

Drag and drop

Interaction.DragDropMode controls whether items can be moved or copied between columns:

Value	Description
ddmNone	Drag and drop disabled
ddmMove	Drag moves item to the target column
ddmCopy	Drag copies item; original remains

KanbanBoard1.Interaction.DragDropMode := ddmMove;

When DragDropMode is ddmMove, the user can drag an item from one column and drop it into another. The item is removed from the source column and inserted at the drop position in the target column.

Editing

Enable editing the item text directly on the board:

KanbanBoard1.Interaction.Editing := True;

Interaction.MouseEditMode controls when editing starts:

Value	Description
pemSingleClick	Edit starts on the first click
pemDoubleClick	Edit starts on the second click
pemSingleClickAfterSelect	Single click starts editing only after the item is already selected

KanbanBoard1.Interaction.MouseEditMode := pemDoubleClick;

Interaction.KeyboardEdit enables starting editing via the keyboard (Enter or F2 on the focused item):

KanbanBoard1.Interaction.KeyboardEdit := True;

Programmatic edit control

// Start editing the selected item in a column
KanbanBoard1.Columns[0].StartEditMode;

// Stop editing
KanbanBoard1.Columns[0].StopEditMode;

// Toggle
KanbanBoard1.Columns[0].ToggleEditMode;

Multi-select

KanbanBoard1.Interaction.MultiSelect := True;

When MultiSelect is True, users can select multiple items in a column using Shift+Click or Ctrl+Click. Retrieve the selected set:

var selected := KanbanBoard1.Columns[0].GetSelectedItems;

SelectedItemCount returns the number of currently selected items in a column.

To clear a column's selection:

KanbanBoard1.Columns[0].ClearSelection;

Touch behavior

Property	Default	Description
TouchScrolling	True	Pan a column's item list by dragging with a finger
SwipeBounceGesture	True	Elastic bounce when scrolling reaches the top or bottom of a column

// Disable bounce on desktop
KanbanBoard1.Interaction.SwipeBounceGesture := False;

Hyperlinks

KanbanBoard1.Interaction.AutoOpenURL := True;

When AutoOpenURL is True, clicking a URL in item text automatically opens it in the default browser.

Handling events

React to item selection with OnSelectItem:

procedure TForm1.KanbanBoard1SelectItem(Sender: TObject;
  AColumn: TTMSFNCKanbanBoardColumn; AItem: TTMSFNCKanbanBoardItem);
begin
  ShowMessage(AItem.Title + ' selected in column ' + AColumn.Header.Text);
end;

React to text changes after editing with OnUpdateItemText:

procedure TForm1.KanbanBoard1UpdateItemText(Sender: TObject;
  AColumn: TTMSFNCKanbanBoardColumn; AItem: TTMSFNCKanbanBoardItem;
  AText: String);
begin
  AItem.Text := AText;
end;

Cancelling and inspecting drops

OnBeforeDropItem lets you veto a drop by inspecting the source and target column or item. OnAfterDropItem fires once the move/copy has committed:

procedure TForm1.KanbanBoard1BeforeDropItem(Sender: TObject;
  AFromColumn, AToColumn: TTMSFNCKanbanBoardColumn;
  AFromItem, AToItem: TTMSFNCKanbanBoardItem;
  var ACanDrop: Boolean);
begin
  // Prevent moving items into a 'Done' column unless they have a title.
  if SameText(AToColumn.Header.Text, 'Done') and (AFromItem.Title = '') then
    ACanDrop := False;
end;

procedure TForm1.KanbanBoard1AfterDropItem(Sender: TObject;
  AFromColumn, AToColumn: TTMSFNCKanbanBoardColumn;
  AFromItem, AToItem: TTMSFNCKanbanBoardItem);
begin
  StatusBar1.SimpleText :=
    Format('Moved "%s" to %s', [AFromItem.Title, AToColumn.Header.Text]);
end;

Filter events

OnBeforeApplyFilter fires before a column's filter is committed and can cancel it; OnAfterApplyFilter fires after the filter has been applied.

procedure TForm1.KanbanBoard1BeforeApplyFilter(Sender: TObject;
  AColumn: TTMSFNCKanbanBoardColumn;
  AFilter: TTMSFNCTableViewFilterData;
  var AAllow: Boolean);
begin
  // Reject empty filters typed into the column header search box.
  if Trim(AFilter.Condition) = '' then
    AAllow := False;
end;

Custom drawing events

The board fires a pair of before/after events for the item background, text, and title. The "before" variants set AAllow := False to suppress default drawing — useful for fully owner-drawn items — and most accept an ADefaultDraw output that controls whether the default rendering still runs:

procedure TForm1.KanbanBoard1BeforeDrawItem(Sender: TObject;
  AGraphics: TTMSFNCGraphics; ARect: TRectF;
  AColumn: TTMSFNCKanbanBoardColumn; AItem: TTMSFNCKanbanBoardItem;
  var AAllow: Boolean; var ADefaultDraw: Boolean);
begin
  // Add a coloured gutter on the left side, then let default drawing run.
  AGraphics.Fill.Color := AItem.MarkColorLeft;
  AGraphics.DrawRectangle(RectF(ARect.Left, ARect.Top, ARect.Left + 4, ARect.Bottom));
end;

OnBeforeDrawItemText, OnBeforeDrawItemTitle, and OnBeforeDrawItemIcon follow the same pattern with the relevant payload (the string being drawn or the bitmap). OnItemCustomDrawMark lets you paint each mark area (top, bottom, left, right) individually.

Sorting comparison

When Sorting is True on a column, supply OnItemCompare to override the default text comparison:

procedure TForm1.KanbanBoard1ItemCompare(Sender: TObject;
  AColumn: TTMSFNCKanbanBoardColumn;
  Item1, Item2: TTMSFNCKanbanBoardItem;
  var ACompareResult: Integer);
begin
  // Sort by mark colour intensity, then by title.
  ACompareResult := CompareValue(Ord(Item1.MarkType), Ord(Item2.MarkType));
  if ACompareResult = 0 then
    ACompareResult := CompareText(Item1.Title, Item2.Title);
end;

Other events

Event	Fires when
OnColumnCollapse, OnColumnExpand	A column is collapsed or expanded by interaction or code.
OnItemCollapse, OnItemExpand	An expandable item changes state.
OnDoneButtonClicked	The "done" affordance in the column header is clicked.
OnCustomizeColumn	A column is added; lets you reach into the internal TTMSFNCKanbanBoardTableView for advanced customization.

Combined example — drag-and-drop board with editing and multi-select

KanbanBoard1.Interaction.DragDropMode := ddmMove;
KanbanBoard1.Interaction.Editing := True;
KanbanBoard1.Interaction.MouseEditMode := pemDoubleClick;
KanbanBoard1.Interaction.KeyboardEdit := True;
KanbanBoard1.Interaction.MultiSelect := True;
KanbanBoard1.Interaction.TouchScrolling := True;
KanbanBoard1.Interaction.SwipeBounceGesture := True;
KanbanBoard1.Interaction.AutoOpenURL := True;

Related API

• TTMSFNCKanbanBoard — Interaction, SelectedItem, SelectItem, OnSelectItem, OnUpdateItemText, OnBeforeDropItem, OnAfterDropItem, OnBeforeApplyFilter, OnAfterApplyFilter, OnBeforeDrawItem, OnBeforeDrawItemText, OnBeforeDrawItemTitle, OnBeforeDrawItemIcon, OnItemCustomDrawMark, OnItemCompare, OnColumnCollapse, OnColumnExpand, OnItemCollapse, OnItemExpand, OnDoneButtonClicked, OnCustomizeColumn

See also

• Columns — column filter and collapse/expand
• Items — moving and copying items programmatically
• Appearance — selected and focus styles