Editing: JavaScript Data Grid Guide

Developer guide › Editing

Editing

Turning it on

• Declarative validation
• Deleting rows

Full guide: Editing ›

Optimistic writes and rollback

The grid has always written optimistically without calling it that: an edit lands in the model and is painted before anything else happens. What edit.commit adds is durability: whether the write reached your server, and what to put back when it did not.

Full guide: Optimistic writes and rollback ›

Selection and ranges

Row selection and cell ranges are separate answers to separate questions, which records versus which values. Dragging across cells does not tick row checkboxes, and selecting rows does not build a range.

• The checkbox column
• Selecting every row on a pushdown source
• The row-number column

Full guide: Selection and ranges ›

Filling a series

Dragging the fill handle continues what it can recognise rather than repeating the block. Detection is per column, so dragging three columns down continues three independent series.

Full guide: Filling a series ›

Formulas

A leading = in a numeric cell is a formula. Type =quantity * unitPrice and the grid stores 119.88.

Full guide: Formulas ›

Your own menu items and buttons

The cell menu's function form is handed the cell that was clicked and the built-in items. Adding one entry does not mean reproducing the other thirteen.

• Declaring a menu on the column itself
• The three levels compose as a chain
• A range, and rows that belong to no column
• Chart a selected range
• A crosshair across one chart, or across several
• Letting a reader draw on a chart
• The point-to-point measure tool
• Measurers: a span with a readout

Full guide: Your own menu items and buttons ›

Row reorder

rowReorder: true puts a drag handle in the first visible column and lets a user move rows with it, or with Alt+Shift+↑/↓. { column: 'name' } puts the handle somewhere else.

• A manual order under a sort
• Moving a row into another group
• What is refused, and what is said

Full guide: Row reorder ›

Moving rows between grids

A row can be dragged out of one grid and into another, a picker beside a basket, an inbox beside a queue, an available list beside an assigned one.

Full guide: Moving rows between grids ›

Editing a row on a form

Double-clicking a row opens it in a panel (a right-hand drawer or a centred dialog) with one control per field, a Save and a Cancel. It is the shape almost every application built on a grid ends up wanting, and until now the shape they had to build themselves.

• Adding a row

Full guide: Editing a row on a form ›