Lattice Grid Buy a licence

demo D80

An editable detail

Editing inside the nested grid, reported on the master

detail:cell:changed

Building…
Loading a live grid…

The configuration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>

<div id="grid" style="height: 540px"></div>

<script>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    selection: 'multiple',
    toolPanel: {
      side: 'left',
      panels: ['columns', 'filters', 'views', 'quick'],
      actions: ['undo', 'redo', 'export', 'restore', 'maximise'],
      exportName: 'lattice-demo',
    },
    detail: {
      rows: (row) => row.data.ports,
      height: 260,
      config: {
        rowKey: 'port',
        edit: { enabled: true, start: 'single' },
        // Editing is per column as well as per grid: `edit` on the grid turns
        // the machinery on, and a column is editable only when it says so
        // itself. Port, speed and peer stay read-only here.
        columns: [
          { field: 'port', title: 'Port', layout: { width: 140 } },
          { field: 'vlan', title: 'VLAN', type: 'number', layout: { width: 100 }, edit: true },
          { field: 'speed', title: 'Speed', type: 'number', format: { suffix: ' Gb' }, layout: { width: 110 } },
          {
            field: 'state', title: 'State', layout: { width: 130 }, edit: true,
            cell: { decoration: 'dot', variant: { map: { up: 'success', down: 'danger', 'admin down': 'neutral' } } },
          },
          { field: 'peer', title: 'Peer AS' },
        ],
      },
    },
    columns: [
      { field: 'circuit', title: 'Circuit', layout: { width: 160 } },
      { field: 'customer', title: 'Customer', filter: { type: 'set' } },
      { field: 'portCount', title: 'Ports', type: 'number', layout: { width: 100 } },
      { field: 'charge', title: 'Monthly charge', type: 'number', format: { style: 'currency', currency: 'GBP', decimals: 0 }, total: 'sum', layout: { width: 180 } },
    ],
    rows,  // circuits, each carrying its own ports array
  });

  // Edits inside a nested detail grid are re-emitted on the master, tagged with
  // the master they came from and the path the value takes on its record.
  grid.on('detail:cell:changed', (e) => {
    console.log(e.masterKey, e.path, e.value);
  });
</script>

Editing values inside a nested detail grid

A master-detail layout expands one row into a nested grid holding related records: line items under an order, trades under a book, tickets under an account. Making that nested grid editable is the natural next step once a developer needs the detail to be a working view rather than a read-only summary, so a value can be corrected without leaving the row it belongs to. Lattice Grid runs the detail as a full instance of itself, so the same editing configuration, validators and editors that apply to a top-level column apply inside the detail without a separate implementation. What differs is visibility: an edit made three levels down, inside a collapsed branch, has no visible effect on the master row unless something surfaces it. Lattice Grid emits detail:cell:changed whenever a value inside any open detail grid is committed, carrying the parent row, the detail row and the changed field, so the host can update a summary column, mark the master row dirty, or push the change upstream without polling every open detail for state. Because the event fires per commit rather than on a timer, a masters row reflecting “3 items changed” stays accurate even when several details are open and edited in quick succession, with no risk of missing an edit that happened between polls.

How do I detect an edit made inside a master-detail nested grid?

Listen for detail:cell:changed on the grid instance. The event carries the master row, the detail row and the field that changed, so a handler can update a count or status on the master row, revalidate related fields, or forward the change to the same commit path used for edits on the top-level grid, without inspecting every open detail row directly.

Related demos