Row values disappear when canceling inline edit operation

[JoseAn Fed]

Hi, I am experiencing a new issue on a syncfusion grid (tested over ej2-angular-grids": "28.2.11" but it also fails in previous versions). The specifics for this application are : angular v17, infinitescroll enabled and inline edit. The grid also uses grouping and columns freeze, but I think that has no effect for the issue.

The issue happens after the infinite scroll action has been taken place and new data has populated the grid. In this case, when a cell is edited and without saving, the edition is canceled, the grid is not able to set up the previous values (the object is empty) on the row (maybe caused by the current value for the row Index has been affected by the infinite scroll actions) and then an empty row is set to the grid.

I've attached a sample application where the issue can be replicate, and some screenshots inside the zip folder for the sample operation: 

• RowDissapearEdit.png : Cell edition begins.
• RowDissapearAfterCancel.png: Cell edition canceled. An empty row is added to the grid.
• RowsDissapearAllCanceled.png: In this point all the rows whose edition has been canceled become empty.

The steps for replicate are the following:

• Load the application. Starts collapsing the row's groups in order to raise the infinite scroll operation and new data is delivered. It can be done until the Golf sport just like in the screenshots.
  
• Edit the field: Year, by clicking on the edit icon, and change the value
• Cancel the edition by clicking in the cancel icon. Then the row has disappeared from the grid.

Thanks so much in advance, I would appreciate so much a solution for this.

Best regards!

Attachment: GridAngular17_RowsDissapear_c212d1c1.zip

[Dineshnarasimman Muthu]

Hi JoseAn ,

Greetings from Syncfusion Support.

Thank you for providing detailed description of the issue you are facing. By reviewing the query and the provided sample upon collapsing the grouped rows the infiniteScrolling is triggered and upon editing via command button and cancelling via command button the previous data doesn't seems to be bound to the row.

To overcome this issue, we suggest you to bind the rowData to the args.data in the actionBegin event of the grid with requestType as cancel. The code snippet of the implementation and sample has been attached for your reference.

 

  <ejs-grid

    #grid

    gridLines="Both"

    height="500px"

    [dataSource]="vData"

    [allowGrouping]="true"

    [groupSettings]="groupSettings"

    [enableInfiniteScrolling]="true"

    [editSettings]="editSettings"

    (actionBegin)="actionBegin($event)"

    (commandClick)="commandClick($event)"

    clipMode="EllipsisWithTooltip"

  >

 

  actionBegin(args) {

    if (args.requestType === 'cancel') {

      args.data = args.rowData;

    }

  }

 

Sample: https://stackblitz.com/edit/angular-vjfmjmdb?file=src%2Fapp.component.html,src%2Fapp.component.ts

Please get back to us for further assistance.

Regards,

Dineshnarasimman M

[JoseAn Fed]

Hi, thanks so much Dineshnarasimman for the reply.

This workaround for preserving the row data solves the problem for restoring the row values when canceling, but I think that assignment maybe causes another wrong behavior due to the previous data value is still stored in memory. 

The problem comes when editing a row. In the NormalEdit.startEdit function at ej2-grid, the previous data is set based on the current view records and the row index: gObj.getCurrentViewRecords()[this.rowIndex], that points to the previous edited (and canceled) row. After typing the new value in the edited row, the NormalEdit.endEdit function is raised, and calculates the edited data based on the previous data (with data from a different row) overwritten with the data coming out from the form:

var editedData = extend$1({}, {}, this.previousData, true);editedData = gObj.editModule.getCurrentEditedData(dlgForm, editedData);

 The issue are the fields that are not present on the form, that are populated with the wrong previous data value.

It is a bit tricky, but I've modified the sample to replicate the problem. Now the data is grouped by country and there is an empty country on the first row. So if you collapse several countries until the infinitescroll is raised, (in the sample until Botswana) and edit/cancel a value, when you edit a value in the first row (GS) and save, you can see, (console.log traces at actionComplete event) the field04 property that are meant to be empty is populated with the previous canceled value for country. it does not affect to the field06 because this field is added to the edit form (See the attached screenshot on the zip).

Is there a way to prevent this?. I've tried to reset previous data at actionBegin or actionComplete Events, but has not effect.. 

Thanks so much for your help.

Best regards!

Attachment: GridAngular17_PreviousData_6aff49ce.zip