Stop the ability to "submit" inline edits in AG-Grid

Currently, I am attempting to implement an inline-editable table using Ag-Grid (v 17.0). However, I have encountered an issue where once I finish editing a row and press enter, the changes are immediately saved. Ideally, I would like the user to remain in "edit-mode" until a successful response is received from the backend.

Despite extensively going through the Ag-grid documentation and experimenting with various events (such as cellValueChanged, rowValueChanged, editingStopped), I have been unable to achieve the desired behavior.

It is preferable for me to retain the Ag-grid code intact, without making modifications directly within their component.

angulartypescriptag-grid

Answer №1

If anyone is seeking the solution, I was able to achieve my goal without disabling the "submit" option. Instead, I checked the inputs during the onRowChanged() event. If any errors were found, I set the focus to the specific cell with the issue using 

gridApi.setFocusedCell( cellIdentifier )
.

This process happens so seamlessly that the user may not even notice the transition.

Answer №2

Not familiar with the library, but the issue might be caused by:

  • Having your inputs enclosed in a form
  • Binding the enter key to the input field

In the first scenario, try removing the form element.

In the second scenario, you can prevent the enter key from triggering the input by adding this to your input element:

<input type="text" (keyup.enter)="null">

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

Exploring for JSON keys to find corresponding objects in an array and adding them to the table

I'm currently working on a project where I need to extract specific objects from a JSON based on an array and then display this data in a table. Here's how my situation looks: playerIDs: number[] = [ 1000, 1002, 1004 ] The JSON data that I am t ...

htmlarraysangulartypescript

What is the most effective way to transmit a conditional operator via a TypeScript boolean field?

Currently, as part of my transition to typescript, I am working on incorporating a conditional operator into the table component provided by Ant Design. const paginationLogic = props.data.length <= 10 ? false : true return ( <> ...

javascriptreactjstypescriptbooleanconditional-operator

Avoid duplication of values in Angular4 when using *ngFor

Looking for assistance in updating an AngularJS project to Angular4. I have a JSON rest endpoint that returns a list of activities sorted by date and time. In AngularJS, I utilized ng-repeat to iterate through the data and ng-show to prevent duplicate entr ...

angular

The current directory does not belong to a Cordova project

Upon executing ionic cordova run browser --verbose within the main directory of my Ionic4 project, I encounter the error message "Current working directory is not a Cordova-based project." as shown below. I've observed that the command generates a "w ...

angularwindowscordovaionic-frameworkionic4

When using ngFor in HTML, the ID of an object within an array of objects can become undefined during execution

Currently, I am in the process of developing a mobile application with the Ionic framework. One of the key functionalities of this app involves making an API call to retrieve transaction data, which then needs to be displayed in the HTML template: The dat ...

angulartypescriptionic-frameworkionic3angular-ng-if

Sharing information with ViewChild within an Angular component

Is there a way to transfer data from a component to a view child element? For example, I have declared the following variable in the component: @ViewChild('warningNotification', { static: false }) warningNotification: jqxNotificationComponent; p ...

angulartypescript

Learning how to effectively utilize the tap and map functions in Angular

How can I redirect to a URL received from the backend in my Angular project? public createPaymentMethod(paymentMethodDto: any): Observable<any> { return this.http.post<any>(ConfigService.Configuration.apiUrl + `/payments`, paymentMetho ...

angulardictionary

Having trouble with VSCode/tsconfig path configurations, as the files are being fetched but still receiving a "Module not found" error in the editor

Since I began working on this project, I've been encountering a peculiar issue. When importing modules and files in my Angular components/classes using import, I face an error in VSCode when the paths use the base path symbol @. Strangely enough, desp ...

angulartypescriptvisual-studio-code

Next.js: Importing from a new endpoint triggers the code execution once more

Here is a simplified example I created for this specific question. Imagine I want to maintain a server-side state. components/dummy.ts console.log('initialize array') let number: number = 0 const incrementValue: () => number = () => numbe ...

node.jstypescriptnext.js

Ways to resolve the error message "Type 'Promise<{}>' is missing certain properties from type 'Observable<any>'" in Angular

Check out this code snippet: const reportModules = [ { url: '', params: { to: format(TODAY, DATE_FORMAT).toString(), from: format(TODAY, DATE_FORMAT).toString() } }, { url: 'application1', params: { to: for ...

javascripttypescript

What is the process for selectively adding interceptors to app.module?

After searching through various topics, I have not found a solution that addresses my specific issue. To provide some context, we have an Angular App that operates in two modes - one mode uses one API while the other mode utilizes a different API. My goal ...

javascriptangularangular-httpclient-interceptors

Utilizing Rxjs to transform an array of objects

My goal is to map an array of objects. Currently, I have the following code: return this.service.post(url, payload, this.httpOptions) .pipe( map((obj: any, index) => [({ ...obj, val1: obj[index].val1.id, v ...

angulartypescriptrxjs

In a local setting, the KendoUI chips are displaying without their borders

I recently tested out the code from kendo on StackBlitz and it worked perfectly: https://i.stack.imgur.com/Nrp2A.png However, when running the same code on my localhost, all the styling for the chip is missing: https://i.stack.imgur.com/1pUH9.png The c ...

htmlcssangularkendo-ui

Error in TypeScript due to object being undefined

Exploring TypeScript and facing a challenge with setting properties in an Angular component. When I attempt to define properties on an object, I encounter an error message: ERROR TypeError: Cannot set property 'ooyalaId' of undefined Here is ho ...

angulartypescript

Having trouble setting up a new Angular project using NodeJS?

I am encountering an issue while attempting to create a project following the installation of angular-cli on my system. Upon running the command ng new project-name, I am faced with the following error message: ERROR: 21328 verbose stack Error: EPERM: ...

node.jsangularnpm

Learn how to incorporate unique breakpoints in Bootstrap 4 and effectively utilize responsive breakpoint mixins in SCSS for a tailor-made responsive design

I am currently developing an Angular 5 application that requires responsiveness. I am encountering difficulties in making it responsive for different resolutions such as 1366X768 and 1920X1080 where font sizes vary. Issue 1: I have customized breakpoints ...

cssangularbootstrap-4

An easy guide to using validators to update the border color of form control names in Angular

I'm working on a form control and attempting to change the color when the field is invalid. I've experimented with various methods, but haven't had success so far. Here's what I've tried: <input formControlName="pe ...

javascriptangulartypescript

Uh oh! An issue occurred: Cannot access values of an undefined property (reading 'valueOf')

I am attempting to loop through the JSON data and extract the start time and end time keys. I have tried two different methods in my API code to achieve this. The console.log is not showing any errors, but the other loop method is causing an error to appea ...

jsonangulartypescriptapiobject

Harness the power of Angular 2 on standard shared hosting services

Starting with AngularJS 2: Installed NodeJS Downloaded the initial project Ran it on Node Everything works perfectly! But now, how can I run it in a production environment on shared hosting (without Node and not on a VPS)? How can I open it in a browse ...

angularjsnode.jstypescripthostingshared-hosting

Dealing with Overwhelmingly Large Angular 5 Components

I'm currently developing a project in Angular 5 and one of our component files is becoming quite large, reaching nearly a thousand lines and continuing to grow. This will eventually make it difficult to manage and understand. We are seeking advice on ...

typescriptangular5