Interaction with gridData on ui-grid edit events

Question

I am using Angular ui-grid and am pretty new at it. I receive an array of objects to render data for each row. Each object, hence each row , has a field change:false which marks whether any field on that row has been edited or not. I have kept this field visible : false on screen.

However, whenever any change is made to any column of any row, I want to set this field as change:true.

How can this be achieved on the change of a ui-dropdown field or any other field for that matter.

I have this as my changing column:

{ name: "carrier_influence_group", displayName: "Carrier influence group",  enableCellEdit: true, 
                editableCellTemplate: 'ui-grid/dropdownEditor', type:'object', cellFilter: 'cigFilter', editDropdownValueLabel: 'name',
                editDropownOptionsArray: [{ id: 10, name: 'Small' }, { id: 11, name: 'Medium' }, { id: 12, name: 'Large' }]
                    },

I tried looking for any options available. But couldn't find any way in official docs. Kindly suggest a way or some relevant links

Answer 1

You can use the afterCellEdit event for this.

$scope.gridOptions.onRegisterApi = function (gridApi) {
    $scope.gridApi = gridApi;

    gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {
        if (newValue !== oldValue) {
            rowEntity['change'] = true;
        }
    });
});