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​

The optional leading row indicator can show record state, row numbers, and row-selection controls. These elements are configured independently:

FdcGrid(
  dataSet: customers,
  rowIndicator: const FdcGridRowIndicator(
    visible: true,
    options: FdcGridRowIndicatorOptions(
      showRecordStatus: true,
      showRowNumbers: true,
      showRowSelect: false,
    ),
  ),
)

See Row Indicator for the full composition model, numbering behavior, selection controls, and main-menu placement.

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. See Error Indicators for modes, styling, tooltips, and validation behavior.

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.