Merge pull request #3 from DevExpress-Examples/React-example

Added basic functions

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)
 <!-- default badges end -->

React/src/App.tsx

@@ -1,16 +1,92 @@
-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 Button from 'devextreme-react/button';
+import DataGrid, {
+  DataGridTypes, 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 {
-  var [count, setCount] = useState<number>(0);
-  const clickHandler = useCallback(() => {
-    setCount((prev) => prev + 1);
-  }, [setCount]);
+  let grid = React.useRef<DataGrid>(null);
+  const [clicked, setClicked] = useState<Boolean>(false);
+  const [changes, setChanges] = useState<DataGridTypes.DataChange[]>([]);
+
+  const validateVisibleRows = React.useCallback(() => {
+    let dataGrid = grid?.current?.instance;
+    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]);
+    setClicked(true);
+  }, [changes]);
+
+  useEffect(() => {
+    if (changes.length && clicked) {
+      let dataGrid = 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]);
+
+  const onChangesChange = useCallback((changes: DataGridTypes.DataChange[]): void => {
+    setChanges(changes);
+  }, []);
+
   return (
-    <div className="main">
-      <Button text={`Click count: ${count}`} onClick={clickHandler} />
+    <div className="demo-container">
+      <DataGrid
+        ref={grid}
+        id="grid-container"
+        dataSource={customers}
+        keyExpr="ID"
+        showBorders={true}
+      >
+        <Editing
+          onChangesChange={onChangesChange}
+          changes={changes}
+          mode="batch"
+          allowUpdating={true}
+        />
+        <Column
+          dataField="CompanyName"
+        >
+          <RequiredRule />
+        </Column>
+        <Column dataField="City">
+          <StringLengthRule min={4} />
+        </Column>
+        <Column dataField="Phone">
+          <RequiredRule />
+          <PatternRule
+            message="Your phone must have '(555) 555-5555 format!'"
+            pattern={pattern}
+          />
+        </Column>
+        <Column dataField="Fax"></Column>
+        <Column dataField="State"></Column>
+        <Toolbar>
+          <Item>
+            <Button
+              text="Validate DataGrid"
+              stylingMode="outlined"
+              onClick={validateVisibleRows}
+            />
+          </Item>
+          <Item name="saveButton" />
+          <Item name="revertButton" />
+        </Toolbar>
+      </DataGrid>
     </div>
   );
 }

React/src/data.tsx

@@ -0,0 +1,41 @@
+export interface Customer {
+  ID: number;
+
+  CompanyName: string;
+
+  Address: string;
+
+  City: string;
+
+  State: string;
+
+  Zipcode: number;
+
+  Phone: string;
+
+  Fax: string;
+
+  Website: string;
+}
+
+export const customers: Customer[] = [{
+  ID: 1,
+  CompanyName: '',
+  Address: '702 SW 8th Street',
+  City: 'Bentonville',
+  State: 'Arkansas',
+  Zipcode: 72716,
+  Phone: '123456',
+  Fax: '(800) 555-2171',
+  Website: 'http://www.nowebsitesupermart.com',
+}, {
+  ID: 2,
+  CompanyName: 'Electronics Depot',
+  Address: '2455 Paces Ferry Road NW',
+  City: 'NYC',
+  State: 'Georgia',
+  Zipcode: 30339,
+  Phone: '(800) 595-3232',
+  Fax: '(800) 595-3231',
+  Website: 'http://www.nowebsitedepot.com',
+}];

React/src/index.css

@@ -11,3 +11,8 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.demo-container {
+  margin: 50px;
+  width: 90vh;
+}