Fix implementation on editing.changes accumulating

Fixed an issue where the editing.changes array in the Grid was not cleared for newly-added rows that were subsequently deleted. This caused validation to fail as the deleted row's changes remained in the array, even though it was no longer displayed.
DevExpress-Examples · Dec 26, 2024 · 50109d7 · 50109d7
1 parent cd4d587
commit 50109d7
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 5 deletions.
diff --git a/ASP.NET Core/Views/Home/Index.cshtml b/ASP.NET Core/Views/Home/Index.cshtml
@@ -43,7 +43,7 @@
 <script>
     function validateVisibleRows() {
         const grid = $("#gridContainer").dxDataGrid("instance");
-        const currentChanges = grid.option("editing.changes");
+        const currentChanges = grid.option('editing.changes').filter(c => Object.keys(c.data).length > 0);
         const fakeChanges = grid.getVisibleRows().map(function (row) {
             return { type: "update", key: row.data.ID, data: {} };
         });

diff --git a/Angular/src/app/app.component.ts b/Angular/src/app/app.component.ts
@@ -27,10 +27,12 @@ export class AppComponent implements AfterViewChecked {
 
   validateVisibleRows(): void {
     const dataGridInstance = this?.dataGrid?.instance;
+    const currentChanges = (dataGridInstance?.option('editing.changes') as DxDataGridTypes.DataChange[])
+    .filter((c) => Object.keys(c.data).length > 0);
     const fakeChanges = dataGridInstance
       ? dataGridInstance.getVisibleRows().map((row: DxDataGridTypes.Row): DxDataGridTypes.DataChange => ({ type: 'update', key: row.key, data: {} }))
       : [];
-    this.changes = [...this.changes, ...fakeChanges];
+    this.changes = [...currentChanges, ...fakeChanges];
     this.checked = true;
   }
 

diff --git a/React/src/App.tsx b/React/src/App.tsx
@@ -17,11 +17,13 @@ function App(): JSX.Element {
 
   const validateVisibleRows = React.useCallback(() => {
     let dataGrid = grid?.current?.instance;
+    const currentChanges = (dataGrid?.option('editing.changes') as DataGridTypes.DataChange[])
+    .filter((c) => Object.keys(c.data).length > 0);
     const fakeChanges = dataGrid
       ? dataGrid.getVisibleRows().map((row: DataGridTypes.Row): DataGridTypes.DataChange => ({ type: 'update', key: row.key, data: {} }))
       : [];
     // alternatively, you can use the DataGrid|option method to set a new changes array
-    setChanges([...changes, ...fakeChanges]);
+    setChanges([...currentChanges, ...fakeChanges]);
     setClicked(true);
   }, [changes]);
 

diff --git a/Vue/src/components/HomeContent.vue b/Vue/src/components/HomeContent.vue
@@ -67,6 +67,8 @@ const dataGridRef = ref<DxDataGrid>();
 
 const validateVisibleRows = () => {
   const dataGridInstance = dataGridRef.value?.instance! as dxDataGrid;
+  const currentChanges = (dataGrid?.option('editing.changes') as DataGridTypes.DataChange[])
+    .filter((c) => Object.keys(c.data).length > 0);
   const fakeChanges = dataGridInstance
     ? dataGridInstance
       .getVisibleRows()
@@ -76,7 +78,7 @@ const validateVisibleRows = () => {
         data: {}
       }))
     : [];
-  changes.value = [...changes.value, ...fakeChanges];
+  changes.value = [...currentChanges, ...fakeChanges];
   clicked.value = true;
 };
 

diff --git a/jQuery/src/index.js b/jQuery/src/index.js
@@ -43,7 +43,7 @@ $(() => {
 
 function validateVisibleRows() {
   const grid = $('#gridContainer').dxDataGrid('instance');
-  const currentChanges = grid.option('editing.changes');
+  const currentChanges = grid.option('editing.changes').filter(c => Object.keys(c.data).length > 0);
   const fakeChanges = grid.getVisibleRows().map((row) => ({ type: 'update', key: row.key, data: {} }));
 
   grid.option('editing.changes', [...currentChanges, ...fakeChanges]);