Skip to main content

Editing

Editable grid and indicators
Loading FDC sample…
FdcGrid(
  dataSet: customers,
  columns: customerColumns,
  options: const FdcGridOptions(autoEdit: true),
  rowIndicator: const FdcGridRowIndicator(
    visible: true,
    options: FdcGridRowIndicatorOptions(
      showRecordStatus: true,
      showRowNumbers: false,
      showRowSelect: false,
    ),
  ),
  cellIndicator: const FdcGridCellIndicator(
    visible: true,
    mode: FdcGridCellIndicatorMode.line,
  ),
);

Grid editing uses the dataset edit buffer. The grid owns cell interaction; the dataset owns edit state, validation, posting, and persistence.

Editing indicators​

The grid has two complementary indicator surfaces: the leading row indicator and the active-cell indicator.

Row indicator​

Enable the leading region with FdcGridRowIndicator(visible: true). Its content can be composed from three independent elements:

OptionPurpose
showRecordStatusShows record state. Browse/current rows use the navigation indicator, edit/modified rows use the edit indicator, and inserted rows use the insert indicator.
showRowNumbersShows row numbers in the leading region.
showRowSelectShows row-selection controls, including the header selection affordance.
FdcGrid(
  dataSet: customers,
  rowIndicator: const FdcGridRowIndicator(
    visible: true,
    options: FdcGridRowIndicatorOptions(
      showRecordStatus: true,
      showRowNumbers: true,
      showRowSelect: false,
    ),
  ),
)

The row indicator is separate from the dataset current record and from multi-row selection. It can therefore show record state, numbering, selection controls, or any combination of those concerns.

Active-cell indicator​

The active cell can be marked with a bottom line or a full outline:

FdcGrid(
  dataSet: customers,
  cellIndicator: const FdcGridCellIndicator(
    visible: true,
    mode: FdcGridCellIndicatorMode.outline,
  ),
)

Available modes are:

ModePresentation
FdcGridCellIndicatorMode.lineA compact line indicator for the current/editing cell.
FdcGridCellIndicatorMode.outlineA full outline around the current/editing cell.

A column can suppress the active-cell overlay with showIndicator: false. This is useful for highly visual cells such as thumbnails or embedded controls where an overlay would cover important content.

Cell validation feedback is configured separately through FdcGridCellIndicator.errorIndicator. Grid cells support marker or none; inline validation presentation is reserved for standalone editors.

Read-only grids and columns​

Disable all grid editing:

FdcGrid(
  dataSet: customers,
  options: const FdcGridOptions(readOnly: true),
)

Or disable editing for one column:

const FdcIntegerColumn<dynamic>(
  fieldName: 'id',
  readOnly: true,
)

Runtime edit permissions​

FdcGrid(
  dataSet: customers,
  canEditRow: (rowIndex, row) => !row.valueOf<bool>('locked'),
  canEditColumn: (rowIndex, column, row) =>
      column.fieldName != 'id',
)

These callbacks control UI editability. Put integrity rules that must apply outside the grid in dataset validation and lifecycle hooks.

Intercept a value before writing​

FdcTextColumn<String>(
  fieldName: 'state',
  onValueChanging: (context) {
    final value = context.newValue?.trim().toUpperCase();
    if (value == null || value.length != 2) {
      return context.cancel('Use a two-letter state code.');
    }
    return context.replaceValue(value);
  },
)

onValueChanging can accept, replace, or cancel the incoming value before it is written.

Observe successful writes​

Use column-level onValueChanged for one column or grid-level onCellChanged for a central notification surface.

FdcGrid(
  dataSet: customers,
  onCellChanged: (context) {
    debugPrint(
      '${context.fieldName}: ${context.oldValue} -> ${context.value}',
    );
  },
)

These callbacks report accepted local writes. Backend persistence remains part of the dataset apply flow.