Why the gridApi.on.edit.beginCellEdit in angular-ui-grid cannot update the new drop-down options immeidiately?

Question

I have the same problem with this one Why ui grid value drop-down box will be assigned in the event fires before beginCellEdit in angular And have little bit difference. After I updated the editDropdownOptionArray it still keep the old value, It's only have the new value in the next click.

Hope everyone can help me with this one. Thank you.

Here is my code snippet:

The html of the dropdown:

<div>
    <form name="inputForm">
        <select ng-class="'colt' + col.uid"
                ui-grid-edit-dropdown
                ng-model="MODEL_COL_FIELD"
                ng-options="field CUSTOM_FILTERS for field in editDropdownOptionsArray"></select>
    </form>
</div>

The controller code:

$scope.menuColumns = [
                        { displayName: 'Menu', field: 'name', enableCellEdit: false },
                        {
                            displayName: 'Access Level', field: 'accessLevelName',
                            editableCellTemplate: 'Scripts/application/role/directive/dropdown-menu-assignment.html',
                            editDropdownValueLabel: 'Access Level', editDropdownOptionsArray: userMgtConstant.menuAccessLevel
                        }
                    ];

                    $scope.menuOptions = {
                        data: [],
                        onRegisterApi: function (gridApi) {
                            gridApi.edit.on.beginCellEdit($scope, function (rowEntity, colDef, event) {
                                if (rowEntity.parent === true) {
                                    colDef.editDropdownOptionsArray = $scope.levelList;
                                } else {
                                    colDef.editDropdownOptionsArray = $scope.childLevelList;
                                }
                            });
                            gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {
                                if (rowEntity.parent !== true) {
                                    if(rowEntity.name === 'Revenue Bench'){
                                        var accessLevel = commonUtils.getIdFromName(rowEntity.accessLevelName, userMgtConstant.menuAccessLevel);
                                        if(accessLevel > 1){
                                            $scope.isShowFunctionAssignment = false;
                                        } else if(rowEntity.functionAssignments.length !== 0) {
                                            $scope.isShowFunctionAssignment = true;
                                        }
                                    }
                                } else {
                                    // udpate child dropdown list menu
                                    var index = _(userMgtConstant.menuAccessLevel).indexOf(newValue);
                                    $scope.childLevelList = $scope.levelList.filter(function (item, i) {
                                        return i >= index;
                                    });

                                    if($scope.childLevelList.length > 2){
                                        parentSwitch = true;
                                    }

                                    if($scope.childLevelList.length < 3 && parentSwitch){
                                        colDef.editDropdownOptionsArray = $scope.childLevelList;
                                        parentSwitch = false;
                                    }

                                    // update all child value
                                    _($scope.menuOptions.data).each(function (dataItem) {
                                        if (dataItem.parent !== true) { // prevent infinite loop
                                            dataItem.accessLevelName = newValue;
                                        }
                                    });
                                }
                            });
                        }
                    };

Here is the usage of the grid:

<inline-edit-grid options="menuOptions" columns="menuColumns"></inline-edit-grid>

Answer 1

You should look into the usage of editDropdownRowEntityOptionsArrayPath instead of editDropdownOptionsArray

From the docs :

editDropdownRowEntityOptionsArrayPath can be used as an alternative to editDropdownOptionsArray when the contents of the dropdown depend on the entity backing the row.

Here is a link to tutorial