We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

[2 Questions] Add multiple rows in a loop // Event after Cell is edited

Hey together,

I am using the React version of the Ej2 Grid and got multiple questions:

Question #1: I want to add multiple empty rows programmatically. I have a Dialog, where I can put a number (state). I have found a workaround to use `addedRecords` of `batchChanges`

If I use the "addContainersNotWorking" function the following behaviour occours:

If I pass the number 1 - one element is added.

If I pass the number 2, at all it's add 3 elements. He always takes the previous element(s) to the loop. How to prevent this?

Bildschirm­foto 2022-12-31 um 13.26.21.png

Question #2:

I am using the Grid in { 'mode: 'Batch' }.

If I add or delete a row , I trigger programmatically `grid?.endEdit()` in the events `batchAdd`and `batchDelete` and the changes are automatically applied to the `dataSource`.

Then they are not marked as "edited" in the Grid and automatically saved.

I know and read in the community forum it's not 100% what's your intention of the `batch`-Mode is, but I don't want my users to have press the `save` button of the grid, because it may lead to data loss on submit the form, forget to save the batch.

How I can hook into the event where you set the 'is-Edited' class of the cell or you decide, the "batchSave" is enabled, so I can autoSave/grid?.endEdit() functionality programmatically?

Thanks in advance and thank you for your efforts to make the life as a developer much easier :)

1 Reply

VB Vinitha Balasubramanian Syncfusion Team January 17, 2023 10:47 AM UTC

Hi Andre,

Thank you for reaching out to Syncfusion support.

Query1 : I want to add multiple empty rows programmatically

Based on your update, we want to let you know that the addRecord method will add the new record to the top of the Grid component by default. If you would like the new record to be added to the bottom of the Grid, you can change the newTopPosition to “bottom”. Here is an example of the code you can use to do this:


editSettings = {

    allowEditing: true,

    allowAdding: true,

    allowDeleting: true,

    newRowPosition: 'Bottom',

    mode: 'Batch',


If it doesn’t meet your exact requirement, kindly share the exact requirement with detailed description to proceed your query from our side.

Query2 : Event after Cell is edited

Before we can assist you with your query, please provide the following information. This will allow us to provide an accurate solution.

  • A detailed description of your specific needs
  • An explanation of the purpose of using the endEdit event of the grid component in your detailed description.


Vinitha Balasubramanian

Live Chat Icon For mobile
Up arrow icon