DataGrid: Fix the "Cannot read properties of undefined (reading 'values')" error that occurs when adding a row to the second page if initial row values are specified in onInitNewRow (T1274123) (#32515)

Author: Alyar666

e2e/testcafe-devextreme/tests/dataGrid/common/editing.ts

@@ -2957,3 +2957,97 @@ test('The onEditorPreparing event should be called once after clicking on a cell
     delete (window as any).onEditorPreparingCallArgs;
   })();
 });
+
+test('Adding rows to a second page should work correctly when initial row values ​​are specified in the onInitNewRow method (T1274123)', async (t) => {
+  // arrange
+  const dataGrid = new DataGrid('#container');
+  const addAndSaveData = async () => {
+    // act
+    await dataGrid.apiAddRow();
+
+    const editPopup = dataGrid.getEditPopup();
+
+    // assert
+    await t
+      .expect(editPopup.isVisible())
+      .ok();
+
+    // act
+    await dataGrid.apiSaveEditData();
+
+    // assert
+    await t
+      .expect(dataGrid.isReady())
+      .ok()
+      .expect(editPopup.isVisible())
+      .notOk();
+  };
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  // act
+  await dataGrid.apiPageIndex(1);
+  await t.expect(dataGrid.isReady()).ok();
+
+  // assert
+  let visibleRows = await dataGrid.apiGetVisibleRows();
+
+  await t.expect(visibleRows.length)
+    .eql(10)
+    .expect(dataGrid.getDataCell(20, 0).element.textContent)
+    .eql('21');
+
+  // act
+  await addAndSaveData();
+  await addAndSaveData();
+
+  // assert
+  visibleRows = await dataGrid.apiGetVisibleRows();
+
+  await t
+    .expect(visibleRows.length)
+    .eql(12)
+    .expect(visibleRows[10].key)
+    .eql(31)
+    .expect(visibleRows[11].key)
+    .eql(32);
+}).before(async () => {
+  await ClientFunction(() => {
+    (window as any).myData = new Array(30).fill(null).map((_, index) => ({ id: index + 1, text: `item ${index + 1}` }));
+    (window as any).myStore = new (window as any).DevExpress.data.ArrayStore({
+      key: 'id',
+      data: (window as any).myData,
+    });
+  })();
+
+  return createWidget('dxDataGrid', {
+    dataSource: {
+      key: 'id',
+      load(loadOptions) {
+        return (window as any).myStore.load(loadOptions);
+      },
+      totalCount() {
+        return (window as any).myStore.totalCount();
+      },
+      insert(values) {
+        if (values.id === 0) {
+          // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+          values.id = (window as any).myData.length + 1;
+        }
+
+        return (window as any).myStore.insert(values);
+      },
+    } as any,
+    columns: ['id', 'text'],
+    showBorders: true,
+    editing: {
+      mode: 'popup',
+      allowAdding: true,
+    },
+    onInitNewRow(e) {
+      e.data.id = 0;
+      e.data.text = 'test';
+    },
+    height: 300,
+  });
+});

packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/helpers/utils.ts

@@ -0,0 +1,71 @@
+import { jest } from '@jest/globals';
+import fx from '@js/common/core/animation/fx';
+import type { dxElementWrapper } from '@js/core/renderer';
+import $ from '@js/core/renderer';
+import type { Properties as DataGridProperties } from '@js/ui/data_grid';
+import DataGrid from '@js/ui/data_grid';
+import { DataGridModel } from '@ts/grids/data_grid/__tests__/__mock__/model/data_grid';
+import type { Controllers } from '@ts/grids/grid_core/m_types';
+
+export interface DataGridInstance extends DataGrid {
+  getController: <T extends keyof Controllers>(name: T) => Controllers[T];
+}
+
+export const SELECTORS = {
+  gridContainer: '#gridContainer',
+};
+
+export const GRID_CONTAINER_ID = 'gridContainer';
+
+export const createDataGrid = async (
+  options: DataGridProperties = {},
+): Promise<{
+  $container: dxElementWrapper;
+  component: DataGridModel;
+  instance: DataGridInstance;
+}> => new Promise((resolve) => {
+  const $container = $('<div>')
+    .attr('id', GRID_CONTAINER_ID)
+    .appendTo(document.body);
+
+  const dataGridOptions: DataGridProperties = {
+    keyExpr: 'id',
+    ...options,
+  };
+
+  const instance = new DataGrid(
+    $container.get(0) as HTMLDivElement,
+    dataGridOptions,
+  ) as DataGridInstance;
+  const component = new DataGridModel($container.get(0) as HTMLElement);
+
+  jest.runAllTimers();
+
+  resolve({
+    $container,
+    component,
+    instance,
+  });
+});
+
+export const beforeTest = (): void => {
+  fx.off = true;
+  jest.useFakeTimers();
+};
+
+export const afterTest = (): void => {
+  const $container = $(SELECTORS.gridContainer);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const dataGrid = ($container as any).dxDataGrid('instance') as DataGrid;
+
+  dataGrid?.dispose();
+  $container.remove();
+  jest.clearAllMocks();
+  jest.useRealTimers();
+  fx.off = false;
+};
+
+export const flushAsync = async (): Promise<void> => {
+  jest.runAllTimers();
+  await Promise.resolve();
+};

packages/devextreme/js/__internal/grids/grid_core/data_controller/m_data_controller.ts

@@ -70,7 +70,7 @@ interface HandleDataChangedArguments {
   error?: any;
 }
 
-type UserData = Record<string, unknown>;
+export type UserData = Record<string, unknown>;
 
 export interface Item {
   rowType: 'data' | 'group' | 'groupFooter' | 'detailAdaptive';