尝试在“取消编辑”单击时刷新Angular Ui-Grid

Question

I am working with the Angular ui-grid . I am trying to accomplish something which should be fairly simple but can't find anything that works. All I want to do is allow a user to edit the grid and then have the option to click a cancel button:

<icon name="cancel" ng-disabled="$ctrl.canceldisabled" ng-click="$ctrl.cancelBSS()" size="20px" title="Cancel"></icon>

This icon will then basically refresh the grid, or set the grid cell back to its last saved value. Wouldn't just a simple refresh of the grid work in this case:

public cancelBSS() {
        ctrl.gridApi.grid.refresh();
    };

I've tried most api options - notifyDataChange, I've tried resetting the gridOptions.data back to its last saved state but both don't do anything. Nothing changes.

Answer 1

You can try to save oldValue on begin cell edit and then restore it on button click:

$scope.gridOptions.onRegisterApi = function(gridApi) {
    gridApi.edit.on.beginCellEdit(null, function (rowEntity, colDef, newValue, oldValue) {                    
        $scope.savedCell = {
            entityHashKey: rowEntity.$$hashKey,
            field: colDef.field,
            value: rowEntity[colDef.field]
        }
    });
}

$scope.cancelEdit = function() {
    var row = $scope.gridApi.grid.rows.find(function(row) {
        if($scope.savedCell != null)
            return row.entity.$$hashKey == ctrl.savedValue.entityHashKey;
    })
    if(row == undefined)
        return;
    row.entity[$scope.savedCell.field] = $scope.savedCell.value;
}