Fix sample (#10)

* Created a new file CODEOWNERS  [skip ci]

* 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.

* Update HomeContent.vue

* 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.

* Fixed indent

* README auto update [skip ci]

---------

Co-authored-by: DevExpressExampleBot <scmaintenance@devexpress.com>
Co-authored-by: DevExpressExampleBot <fake@test.test>

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 @@ 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;
   }
 

README.md

@@ -1,5 +1,4 @@
 <!-- default badges list -->
-![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/723096689/23.1.3%2B)
 [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1202789)
 [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
 [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)

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

Vue/src/components/HomeContent.vue

@@ -67,6 +67,8 @@ const dataGridRef = ref<DxDataGrid>();
 
 const validateVisibleRows = () => {
   const dataGridInstance = dataGridRef.value?.instance! as dxDataGrid;
+  const currentChanges = (dataGridInstance?.option('editing.changes') as DxDataGridTypes.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;
 };
 

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