Issue with Syncfusion Grid in Angular. Row Edits Reverting After Adding - Deleting Another Row

[Gabriel Alva]

Hi

I'm working on an Angular project that uses the Syncfusion Grid component. I've set up a very basic sample with just a data source, edit settings, and some toolbar items. The issue I'm encountering is that when I edit an existing row and then immediately add a new row (or delete one), the changes I made to the edited row revert back to their initial values.

This seems to happen consistently, but only when I edit a row and then either add or delete another row right after. I'm not sure what's causing this behavior or how to resolve it.

Has anyone else faced this issue or have any suggestions on how to fix it?

Thanks in advance for any help!

Sample: Sample project in stackblitz

[Aishwarya Rameshbabu]

Hi Gabriel Alva,

Greetings from Syncfusion support.

Upon reviewing your query, we observed that you are facing issues with adding, editing, and deleting records in the Syncfusion Grid. Our analysis of the provided sample indicates that you are utilizing the ‘Dialog’ mode of editing but have not defined the primary key column in the Grid. To execute CRUD operations, such as adding, editing, and deleting, it is necessary for the Grid to have a column with the ‘columns.isPrimaryKey’ property enabled containing unique data. We have updated the sample to include the isPrimaryKey' property, thereby resolving the reported issue. Please refer to the updated sample and the documentation link below for more detailed information.

App.component.html

 

<ejs-grid

  id="gridMaterialDetail"

  class="mt-3"

  [dataSource]="selectedRequisitionDetail"

  [editSettings]="editSettings"

  [toolbar]="toolbarDetail"

> 

  <e-columns>

    <e-column

      field="description"

      headerText="Descripcion"

      width="300"

      isPrimaryKey="true"

    ></e-column>

    <e-column

      field="quantity"

      headerText="Qtty"

      width="70"

      editType="numericedit"

    ></e-column>

  </e-columns>

</ejs-grid>

 

Sample: Angular syncfusion grid ticket (forked) - StackBlitz

If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R

[Gabriel Alva]

Hi Aishwarya,

Thank you for the prompt response and for updating the sample with the isPrimaryKey property.

I understand the importance of setting a primary key for proper CRUD operations. However, in my case, the primary key for the rows is a GUID generated at the backend, which is not sent to the frontend. This creates a challenge because even if I could retrieve the GUIDs from the backend, I still need to handle rows that are created on the frontend but haven’t been assigned a GUID yet.

Could you advise on the best approach to manage such cases where the primary key (GUID) is generated only after the row is persisted in the backend? Specifically, how can I ensure that new rows added on the frontend maintain their state correctly until they are saved and assigned a GUID?

Thank you for your help.

[lucy victoria]

This issue likely occurs because the grid's data source isn't being updated properly after editing. When you add or delete a row, the grid might be re-rendering or refreshing without considering the changes made to the edited row.

To resolve this, ensure that you explicitly update the data source after editing a row by using the grid.refresh() method or by programmatically saving the changes before performing add or delete operations. You can also use updateRow to manually apply the changes to the data source.

[Aishwarya Rameshbabu]

Hi Gabriel Alva,

Based on the provided information, it appears that you are setting the primary key for the rows in the Grid using a GUID generated in the backend. You intend to perform CRUD operations such as adding, editing, and deleting by designating the GUID as the primary key within the Syncfusion Grid column. Before we proceed with providing a solution for this requirement, we need some additional information to offer the most appropriate resolution. Kindly share the following details:

1. You mentioned that the GUID is generated only when the row is persisted in the backend. Please confirm whether you are directly updating the data bound to the Grid with the GUID generated in the backend. If so, you can invoke grid.refresh(), which will re-render the Grid with the updated data, allowing you to perform CRUD operations with the primary key enabled Grid. Note that CRUD operations can only be performed if the Grid contains a primary key column with a unique value.

2. Please confirm the type of data binding used in the Grid. Is it remote or local data? If remote data is used, kindly provide the adaptor details. Additionally, please explain how the GUID generation is being handled.

3. Share the complete Grid rendering code along with any event handler functions utilized. Also, provide the editSettings configuration that has been implemented in the Grid.

4. Indicate the version of the Syncfusion package you are currently using.

API Reference: Refresh

Regards

Aishwarya R

[Gabriel Alva]

Hi Aishwarya,

Thank you for your response and the sample you provided.

To explain my case:

The data in my grid is fetched from the backend through an Angular service. When the dialog containing the grid is opened, I retrieve this data from the backend and assign it directly to the grid's dataSource as a local array. I’m not using any adaptor—just working with the array itself.

The grid allows users to add, edit, or delete rows. When the user submits the form, the entire dataset, including any new rows, is sent back to the backend. The primary key for each row is a GUID generated by the backend. However, to handle new rows added on the frontend (which haven’t been assigned a GUID yet), I decided to generate a GUID on the frontend using the uuid library. This ensures that the grid functions correctly, especially when managing CRUD operations.

To solve the issue of edits reverting after adding or deleting rows, I made sure that each row had a GUID (either from the backend or generated in the frontend) as its primary key. This way, the grid could maintain the state of each row accurately. With the primary key properly set, the grid now handles edits, additions, and deletions without reverting changes.

Thanks again for your help!

Best regards,
Gabriel Alva

[Aishwarya Rameshbabu]

Hi Gabriel Alva,

Based on the information provided, we have observed that you are utilizing the uuid library to generate GUIDs for newly added rows on the front end. We are pleased to hear that the primary key for each row is now being correctly set using GUIDs and that CRUD operations are functioning appropriately in your Grid application. If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R