Fix sample

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: {} };
         });

Angular/src/app/app.component.ts

@@ -27,10 +27,12 @@
 
   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;
   }
 

CODEOWNERS

@@ -0,0 +1 @@
+*       @DevExpressExampleBot

React/src/App.tsx

@@ -17,11 +17,13 @@
 
   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]);
 

Vue/src/components/HomeContent.vue

@@ -67,6 +67,8 @@
 
 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 @@
         data: {}
       }))
     : [];
-  changes.value = [...changes.value, ...fakeChanges];
+  changes.value = [...currentChanges, ...fakeChanges];
   clicked.value = true;
 };
 

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]);