Updated TS

DevExpress-Examples · Dec 15, 2023 · 34bbbd3 · 34bbbd3
1 parent a5ad486
commit 34bbbd3
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 28 deletions.
diff --git a/React/src/App.tsx b/React/src/App.tsx
@@ -1,44 +1,53 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import Button from 'devextreme-react/button';
 import './App.css';
 import 'devextreme/dist/css/dx.material.blue.light.compact.css';
 import type { DataChange } from 'devextreme/common/grids';
-import { Row } from 'devextreme/ui/data_grid';
+import dxDataGrid, { Row } from 'devextreme/ui/data_grid';
 import DataGrid, {
   Column, Editing, PatternRule, RequiredRule, StringLengthRule, Toolbar, Item,
 } from 'devextreme-react/data-grid';
 import notify from 'devextreme/ui/notify';
 import { customers } from './data';
 
+const pattern = /^\(\d{3}\) \d{3}-\d{4}$/i;
+
 function App(): JSX.Element {
   let grid = React.useRef<DataGrid>(null);
+  const [clicked, setClicked] = useState<Boolean>(false);
   const [changes, setChanges] = useState<DataChange[]>([]);
 
-  const onChangesChange = useCallback((changes: DataChange[]): void => {
-    setChanges(changes);
+  const validateVisibleRows = React.useCallback(() => {
+    let dataGrid: dxDataGrid | undefined = grid?.current?.instance;
+    const fakeChanges: DataChange[] = dataGrid
+      ? dataGrid.getVisibleRows().map((row: Row) => ({ type: 'update', key: row.key, data: {} }))
+      : [];
+    // alternatively, you can use the DataGrid|option method to set a new changes array
+    let array: DataChange[] | [] | undefined = [...changes, ...fakeChanges];
+    setChanges(array);
+    setClicked(true);
   }, [changes]);
 
-  const validateVisibleRows = React.useCallback(() => {
-    let dataGrid: any = grid?.current?.instance;
-    // dataGrid.focus();
-    const fakeChanges = dataGrid?.getVisibleRows().map((row: Row) => ({ type: 'update', key: row.key, data: {} }));
+  useEffect(() => {
+    if (changes.length && clicked) {
+      let dataGrid: dxDataGrid | undefined = grid?.current?.instance;
+      dataGrid?.repaint();
+      // @ts-expect-error - getController is a private method
+      dataGrid?.getController('validating').validate(true).then((result: Boolean) => {
+        const message = result ? 'Validation is passed' : 'Validation is failed';
+        const type = result ? 'success' : 'error';
+        notify(message, type);
+      });
+      setClicked(false);
+    }
+  }, [validateVisibleRows]);
 
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // doesn't work
-    setChanges([...changes, ...fakeChanges]);
-    // works
-    // dataGrid.option('editing.changes', [...changes, ...fakeChanges]);
-    dataGrid.repaint();
-    dataGrid.getController('validating').validate(true).then((result: Boolean) => {
-      const message = result ? 'Validation is passed' : 'Validation is failed';
-      const type = result ? 'success' : 'error';
-      notify(message, type);
-    });
-  }, []);
+  const onChangesChange = useCallback((changes: DataChange[]): void => {
+    setChanges(changes);
+  }, [validateVisibleRows]);
 
   return (
     <div className="demo-container">
-      <div className="placeholder">Top Content</div>
       <DataGrid
         ref={grid}
         id="grid-container"
@@ -54,9 +63,6 @@ function App(): JSX.Element {
         />
         <Column
           dataField="CompanyName"
-          fixed={true}
-          width={80}
-          fixedPosition="left"
         >
           <RequiredRule />
         </Column>
@@ -67,21 +73,21 @@ function App(): JSX.Element {
           <RequiredRule />
           <PatternRule
             message="Your phone must have '(555) 555-5555 format!'"
-            pattern={/^\(\d{3}\) \d{3}-\d{4}$/i}
+            pattern={pattern}
           />
         </Column>
         <Column dataField="Fax"></Column>
         <Column dataField="State"></Column>
         <Toolbar>
-          <Item name="saveButton" />
-          <Item name="revertButton" />
-          <Item location="before">
+          <Item>
             <Button
               text="Validate DataGrid"
               stylingMode="outlined"
               onClick={validateVisibleRows}
             />
           </Item>
+          <Item name="saveButton" />
+          <Item name="revertButton" />
         </Toolbar>
       </DataGrid>
     </div>

diff --git a/React/src/index.css b/React/src/index.css
@@ -11,3 +11,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+.demo-container {
+  margin: 50px;
+  width: 90vh;
+}