Grid with Form Editing
The following example shows how to connect a form with a grid control.
| Name | Phone | City | Notified | Actions |
|---|---|---|---|---|
| Porter Greenholt | 277-094-0463 | Hudsonport | Yes | |
| Viva Smitham | 824-968-6099 | Jerodfort | No | |
| Charlie Schinner | 756-263-3205 | South Penelopehaven | Yes | |
| Kenton Lehner | 934-559-4272 | Robertfort | No | |
| Alexandria Mayert | 493-380-8633 | Matteoville | Yes |
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) ); } }