Grid with Form Editing
The following example shows how to connect a form with a grid control.
| Name | Phone | City | Notified | Actions |
|---|---|---|---|---|
| Therese Marvin | 084-144-5702 | South Domenicoview | No | |
| Davin Gislason | 766-439-0003 | Hettiefurt | No | |
| Ford Hirthe | 692-060-5656 | South Sunny | No | |
| Vita Trantow | 793-708-1723 | Luzport | No | |
| Heather Monahan | 931-209-5326 | Korbinburgh | 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) ); } }