Grid with Form Editing
The following example shows how to connect a form with a grid control.
| Name | Phone | City | Notified | Actions |
|---|---|---|---|---|
| Dariana Graham | 625-785-6110 | Lake Skylaland | Yes | |
| Nikko Orn | 523-593-9032 | New Camila | Yes | |
| Jeremie Okuneva | 185-982-3999 | Handville | Yes | |
| Nicola Swift | 667-001-9187 | Port Orin | Yes | |
| Joe Aufderhar | 061-381-0199 | Abernathybury | No |
ControllerGridForm
class PageController extends Controller { onInit() { this.store.init('$page.records', Array.from({length: 5}).map((v, i)=>({ id: uid(), fullName: casual.full_name, phone: casual.phone, city: casual.city, notified: casual.coin_flip }))); this.addTrigger('$page.form', ['$page.id', '$page.records'], (id, records) => { this.store.set('$page.form', records.find(r => r.id == id)); this.store.set('$page.add', false); }); } newRecord() { let newRecord = { id: uid(), fullName: 'New Entry' } this.store.update('$page.records', records => [...records, newRecord]) this.store.set('$page.id', newRecord.id); } saveRecord() { let record = this.store.get('$page.form'); this.store.update( '$page.records', records => records.map(r => r.id == record.id ? record : r) ); } removeRecord(id) { this.store.update( '$page.records', records => records.filter(r => r.id != id) ); } }