Grid with Form Editing
The following example shows how to connect a form with a grid control.
| Name | Phone | City | Notified | Actions |
|---|---|---|---|---|
| Lorenzo Kiehn | 672-778-1681 | New Pietro | Yes | |
| Merl Feeney | 690-223-2497 | Lake Jackeline | Yes | |
| Clement Lang | 259-513-5159 | South Faye | No | |
| Cristopher Zboncak | 516-904-2574 | Augustville | No | |
| Daphne Glover | 036-280-3805 | Jakefurt | 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) ); } }