CODEWITHSUNDEEP
angularag-grid
Sonic Soul
Sonic Soul

Reputation: 24939

proper way to persist editable ag-grid cells

I implemented ag-grd-ng2 (ag-grid for Angular2) with editable cells, and I am propagating these updates to the server.

I did this by wiring gridOptions.onCellValueChanged event.

my colum def has following properties: 

            c.editable = true;
            c.cellEditor = 'richSelect';
            c.cellEditorParams = {
                cellRenderer: o => o.value ?  o.value.name : o.value, // use name property from underlying collection to show in dropdown
                values: list
            }
            c.newValueHandler = p => p.data[key] = p.newValue.name; // guessing this needs to be done so that newly selected dropdown item shows only the name in cell

The main problem with this implementation is that selecting an item from a dropdown will immediately update in grid cell regardless if underlying asynchronous call succeeds.

Is there a better pattern to use with this grid for updates so that value gets reverted in the grid if the call fails, or doesn't get set to new value until success callback?

another issue is that newValueHandler makes newly selected dropdown item appear correctly in the cell, but onCellValueChanged no longer has access to the ID field of newly selected item.

one possibility i see is column.newValueHandler. perhaps there is a way to use that for an asynchronous operation and only set the new value on success?

update, attempting this as a possible solution:

newValueHandler(p, key){
    this.svc.updateProductField(p.data.ID, p.colDef.field, p.newValue.code) // async server update
        .catch(err =>  {
            p.data[key] = p.oldValue; // set the saved value
            return Observable.throw(err);
        })
        .subscribe(data => { $.notify(p.colDef.headerName + ' saved', 'success');
            p.data[key] = p.newValue.name; // set the saved value
        })

}

the update actually works, but the UI is not showing the new or old value, just blank. probably not designed to work this way :)

Upvotes: 1

Views: 2294

Answers (1)

Sonic Soul
Sonic Soul

Reputation: 24939

one possible solution:

Setting cell style to success or fail based on the server call. This gives some feedback to the user on what happened. 

newValueHandler(p, key) {
    if (p.newValue && p.newValue.code) {
        var nv = p.newValue.name;
        this.svc.updateProductField(p.data.ID, p.colDef.field, p.newValue.code)
            .catch(err => {
                p.colDef.cellClass = 'ag-etp-cell-failed';
                $.notify(p.colDef.headerName + ' update failed', 'error');
                return Observable.throw(err);
            })
            .map(o => {
                p.colDef.cellClass = 'ag-etp-cell-saved';
                $.notify(p.colDef.headerName + ' saved', 'success');
            })
            .subscribe();
    }
    p.data[key] = p.newValue.name || p.newValue;
}

Upvotes: 1

Related Questions