syidaxgrid
Home Pricing Settings

GRID FEATURE

Cell and row editing

Cell editing changes one value immediately; full-row editing commits multiple fields as one row operation. editor specifies the input UI, while editable controls write access.

Markdown source Features

How it works and when to use it

Define stored value types for number, date, select, and checkbox editors. Parsers convert input into values, and validation checks allowed limits.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Example 1. Number and basic Select editing

Enter quantities as nonnegative numbers and statuses from a predefined list.

javascript
grid.columnDefs = [
  { field: 'quantity', editable: true, editor: 'number', min: 0, step: 1 },
  { field: 'status', editable: true, editor: 'select', options: [
    { value: 'open', label: 'In progress' }, { value: 'done', label: 'Complete' }
  ] }
];

Verify the result: Distinguish display labels from stored values. Selecting Complete stores done in the source data.

Example 2. Commit a row

Start editing a displayed order, temporarily change its quantity, then commit.

javascript
const started = await grid.startRowEdit('ORD-0001');
if (started) {
  await grid.stageRowEditCell('quantity', 25);
  console.log(await grid.stopRowEdit('commit'));
}

Verify the result: If starting row editing is rejected, do not proceed. Read the commit report to determine what was actually applied.

Example 3. Cancel editing and subscribe to results

Discard uncommitted values when users cancel, and use only actual change results for saving.

javascript
await grid.stopRowEdit('cancel');
grid.addEventListener('cellValueChanged', event => console.log(event.detail));
grid.addEventListener('rowValueChanged', event => console.log(event.detail));

Verify the result: Assign clear roles to cell-change and full-row commit events so they do not cause duplicate server saves.

Combining features and troubleshooting

Group headings, detail rows, and unloaded placeholders differ from editable data rows. You need a stable ID and editable columns.

Validation failure may leave the editing session active. Clicking Commit alone is not a reason to display a success message.

Related reading