Table of Contents

Columns

Adding columns

Columns are the vertical lanes of the board. Add them at design time in the Object Inspector or programmatically:

var
  col: TTMSFNCKanbanBoardColumn;
begin
  col := KanbanBoard1.Columns.Add;
  col.Header.Text := 'To Do';
  col.Width := 220;
end;

Add multiple columns in one pass with BeginUpdate / EndUpdate:

KanbanBoard1.BeginUpdate;
try
  KanbanBoard1.Columns.Add.Header.Text := 'Backlog';
  KanbanBoard1.Columns.Add.Header.Text := 'In Progress';
  KanbanBoard1.Columns.Add.Header.Text := 'Review';
  KanbanBoard1.Columns.Add.Header.Text := 'Done';
finally
  KanbanBoard1.EndUpdate;
end;

Column properties

Property Description
Header.Text Text shown in the column header
HeaderVisible Show or hide the header area
HeaderFill Background fill of the header area
HeaderStroke Border stroke around the header area
HeaderFont Font for header text
HeaderHorizontalTextAlign Horizontal alignment of header text
HeaderVerticalTextAlign Vertical alignment of header text
HeaderTrimming Text trimming in the header
HeaderWordWrapping Word-wrap in the header
Footer.Text Text shown in the column footer
FooterVisible Show or hide the footer area
FooterText Footer label
FooterFill Background fill of the footer area
FooterStroke Border stroke around the footer area
FooterHorizontalTextAlign Horizontal alignment of footer text
FooterVerticalTextAlign Vertical alignment of footer text
FooterTrimming Text trimming in the footer
FooterWordWrapping Word-wrap in the footer
Fill Background fill behind the column items
Stroke Border stroke around the column
Width Column width when expanded
Visible Show or hide the entire column
UseDefaultAppearance When False, overrides the board-level ColumnsAppearance

Use these per-column properties only when UseDefaultAppearance is False. Otherwise the board-level ColumnsAppearance wins — see Appearance.

Collapse and expand

Columns can be collapsed to a narrow strip to save horizontal space:

// Make a column collapsible
col.Expandable := True;

// Set the width in collapsed state
col.CollapsedWidth := 40;

// Collapse programmatically
col.Expanded := False;

When Expandable is True, an expand/collapse button appears in the header. Users can click it or the control can be toggled in code.

Filter

Each column has an independent filter. Set ShowFilterButton to True to display the filter UI in the header:

col.ShowFilterButton := True;

Apply or clear a filter programmatically:

// Set filter text and apply
col.Filter := 'urgent';
col.ApplyFilter;

// Remove filter but keep filter data
col.RemoveFilter;

// Remove filter and clear filter data
col.RemoveFilters;

Use StartFiltering and StopFiltering to activate the filter UI in code without user interaction.

Sorting

col.Sorting := True;

When Sorting is True, users can click the column header to sort items. Sort direction cycles through ascending and descending.

Disabling interaction

col.DisableInteraction;
// ... do batch work ...
col.EnableInteraction;

Scrolling to an item

col.ScrollToItem(2);   // scroll column so item index 2 is visible

Item lookup and bulk selection

Each column exposes hit-testing and selection helpers that operate on items inside that column. Use them when responding to mouse coordinates or when the user needs to act on more than one item at a time.

// Hit-test by client coordinates (returns nil if no item is at X, Y)
var hit := col.XYToItem(X, Y);
var idx := col.XYToItemIndex(X, Y);

// Bulk selection (requires Interaction.MultiSelect = True)
col.SelectItem(0);                            // by index
col.SelectItems([0, 2, 4]);                   // multiple indexes
var sel := col.GetSelectedItems;              // TTMSFNCKanbanBoardItemArray
var n   := col.SelectedItemCount;
col.ClearSelection;

// Remove an item from this column
col.RemoveItem(someItem);

XYToItem / XYToItemIndex return nil / -1 when no item is under the supplied point. Selection helpers respect the board's Interaction.MultiSelect flag — when multi-select is off, SelectItems selects only the last index in the array.

Edit mode

A column owns the in-place editor for its currently selected item. Start, stop, or toggle the editor without waiting for a double-click:

col.StartEditMode;     // open the editor on the selected item
col.StopEditMode;      // commit edits and close the editor
col.ToggleEditMode;    // open if closed, close if open

When the user finishes editing, the board fires OnUpdateItemText. See Interaction → Programmatic edit control for the event-driven flow.

  • TTMSFNCKanbanBoard — Columns, ColumnsAppearance, XYToColumn, FindItemWithDBKey
  • TTMSFNCKanbanBoardColumn — XYToItem, XYToItemIndex, SelectItem, SelectItems, GetSelectedItems, SelectedItemCount, ClearSelection, RemoveItem, StartEditMode, StopEditMode, ToggleEditMode

See also

  • Items — adding and configuring items within a column
  • Appearance — column colors, fonts, and layout
  • Interaction — drag-and-drop, editing, and keyboard