How come the gridApi.on.edit.beginCellEdit function in angular-ui-grid does not immediately refresh the dropdown options after being updated?

I am encountering a similar issue as described in this post Regarding the assignment of ui grid value drop-down box before beginCellEdit event fires in Angular However, I have noticed a slight difference. Even after updating the editDropdownOptionArray, the old value persists and only reflects the new value upon the next click.

I would greatly appreciate any assistance on this matter. Thank you.

Below is the snippet of my code:

The HTML for 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;
                                        }
                                    });
                                }
                            });
                        }
                    };

Usage of the grid:

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

Answer №1

If you're considering options for dropdowns, take a look at using

editDropdownRowEntityOptionsArrayPath
in place of editDropdownOptionsArray.

According to the documentation:

editDropdownRowEntityOptionsArrayPath
can serve as a substitute for editDropdownOptionsArray when the dropdown content relies on the entity linked to the row.

Check out this tutorial for more information.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The error "TypeError: ollama.chat is not a function" has occurred when trying to use the ollama module in

Currently, I am grappling with a Node.js project that requires me to utilize the ollama module (ollama-js). The problem arises when I invoke the async function chatWithLlama() which contains ollama.chat(), resulting in the following error being thrown: Ty ...

The SelectedIndexChanged event fails to trigger following an onchange event

I am currently working on validating a dropdown list on the client side based on its selected index/value. My goal is to create a function that triggers an alert when the selected index is 0, or alternatively execute the SelectedIndexChandged method in the ...

Why does Safari browser keep showing NAN instead of a value?

In my quest to calculate the difference between two times in Safari browser, I encountered an issue. The code works perfectly fine in Chrome, but in Safari, it returns NAN. When I run the application for the first time, I save today's date. On subsequ ...

Ensure that each number is entered only once in the input field

Is there a way to use javascript/jquery to prevent a user from entering the same number twice in an input box? Users can enter multiple numbers one at a time, but I need to notify them or take action if they try to input the same number again. I attempted ...

Error: Unable to execute $(...).stellar since it is not a recognized function

Having some trouble implementing the stellar plugin. I've included all the necessary js, but keep getting an error in the dev tools console: 'Uncaught TypeError: $(...).stellar is not a function'. Here's what I have in the head tags: ...

Guide to transferring array information from one Vuejs route to another

I'm facing an issue with passing an array from one Vuejs route to another. Specifically, I need to pass the array from home.vue to post.vue. In my route.js file for post.vue, I have: { path: '/post/:cart', name: 'post', com ...

Prevent form submission once all tasks have been finalized

Hey there, I've been racking my brain for hours trying to solve this issue... I'm looking to disable my form after it's been submitted to prevent multiple submissions. However, every method I try seems to disable the button but also interfe ...

Can the document.ready function and a button click function be merged together effectively?

I am working on a tavern name generator that generates names when the document loads and also when a button is clicked. Is it possible to combine the document.ready function with the button click function like this: $(document).ready(function(){ ...

Looking to modify the CSS of an element during a drop event using interact.js?

I've encountered an issue in my code where setAttribute and .transform are not working as expected. I have tried using them within the ondrop event function, but with no success. interact('.dropzone') .dropzone({ // Setting the r ...

When the page is loaded, populate FullCalendar with events from the model

On page load, I am attempting to populate events with different colors (red, yellow, green) on each day of the calendar. Here is a simple example showcasing events for three days: I have data in a model that indicates the available amount of free pallets ...

Why isn't my AJAX POST request to PHP functioning correctly?

It was all working perfectly fine earlier, but now something seems off and I must have made a mistake somewhere. I'm in the process of setting up a form where the information entered is sent via AJAX to my PHP file, which then outputs the username an ...

Using json_encode with chart.js will not produce the desired result

I am attempting to utilize chart.js (newest version) to generate a pie chart. I have constructed an array that I intend to use as the data input for the chart. This is the PHP code snippet: <?php if($os != null) { $tiposOs = array('Orçamento ...

Preserving angular.js TextAngular HTML view

Currently, I rely on textAngular as my go-to WYSIWG editor. However, in the html view, I am facing an issue with long strings of html running together. Is there a way to enclose this information within a <pre></pre> tag or any other suitable so ...

What common problems arise from using mutable data types in a single-threaded environment?

In JavaScript, concurrency is modeled by an event loop, eliminating race conditions. Given this, what are the potential downsides of performing a type-safe operation in the main scope of a program that would warrant caution? const m = new Map([["foo", tru ...

Tips for managing and loading data into a dataGrid or table with the help of ReactJS and ReactHooks

Struggling to retrieve user input data from the form and display it in the table/Datagrid below, without success. Follow the process flow outlined below Once the user submits the form and clicks the send now button, the {handleSubmit} function is trigger ...

Adjust the border hue of the MUI disabled outline input

I am currently struggling to locate the exact definition of this border color. After inspecting the dom, I cannot seem to find any border style within the input component or its pseudo elements... My main goal is to slightly lighten the color of the input ...

Retrieving date from timestamp in a node.js environment

Can someone help me figure out how to display my timestamp as the date in the front end? I've tried multiple methods without success. Here is the code snippet: formulaire.addEventListener('submit', posteValidation); /** * Function to add a ...

Eliminate Elements from Array - Angular Four

I am currently developing a basic to-do app using Angular4. The setup of the app is structured as follows: Form Component: Responsible for adding items to the to-do list Item Component: Represents individual to-do items App Component: Contains a *ngFo ...

Avoid running another process before the current one finishes in jQuery

I have a situation where I am using $.ajax inside a for loop in jQuery. for(var i=0; i < 2; i++) { $.ajax({ url :"/models/getdata"+i, dataType:"json", success:function(data) { } }); } The issue is that before the success function for i=0 completes, ...

Seeking guidance on recompiling a directive within Angular?

I have implemented a directive to display data in a tree-like structure. This directive allows for filtering of the data. However, when I clear the filter, the directive does not automatically update to reflect the changes in the data. It only updates when ...