Documentation

Report Edit

Grid with Form Editing

The following example shows how to connect a form with a grid control.

NamePhoneCityNotifiedActions
Therese Marvin084-144-5702South DomenicoviewNo
Davin Gislason766-439-0003HettiefurtNo
Ford Hirthe692-060-5656South SunnyNo
Vita Trantow793-708-1723LuzportNo
Heather Monahan931-209-5326KorbinburghYes

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)
        );
    }
}
Copied!Cx Fiddle