Added a jQuery example

DevExpress-Examples · Nov 24, 2023 · 288b32b · 288b32b
1 parent 7887392
commit 288b32b
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 8 deletions.
diff --git a/jQuery/src/data.js b/jQuery/src/data.js
@@ -0,0 +1,21 @@
+const customers = [{
+  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',
+}];
diff --git a/jQuery/src/index.html b/jQuery/src/index.html
@@ -5,17 +5,17 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <link rel="icon" href="/favicon.ico" />
     <link rel="stylesheet" type="text/css" href="../node_modules/devextreme-dist/css/dx.material.blue.light.compact.css" />
     <link rel="stylesheet" type="text/css" href="index.css" />
     <script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>
     <script type="text/javascript" src="../node_modules/devextreme-dist/js/dx.all.js"></script>
+    <script type="text/javascript" src="data.js"></script>
     <script type="text/javascript" src="index.js"></script>
   </head>
 
   <body class="dx-viewport">
     <div class="demo-container">
-      <div id="btn"></div>
+      <div id="gridContainer"></div>
     </div>
   </body>
 </html>
diff --git a/jQuery/src/index.js b/jQuery/src/index.js
@@ -1,10 +1,65 @@
 $(() => {
-  let count = 0;
-  $('#btn').dxButton({
-    text: `Click count: ${count}`,
-    onClick(e) {
-      count += 1;
-      e.component.option('text', `Click count: ${count}`);
+  $('#gridContainer').dxDataGrid({
+    dataSource: customers,
+    keyExpr: 'ID',
+    editing: { mode: 'batch', allowUpdating: true },
+    columns: [{
+      dataField: 'CompanyName',
+      validationRules: [{ type: 'required' }],
+    }, {
+      dataField: 'City',
+      validationRules: [{
+        type: 'stringLength',
+        min: 4,
+      }],
+    }, {
+      dataField: 'Phone',
+      validationRules: [{ type: 'required' }, {
+        type: 'pattern',
+        message: 'Your phone must have "(555) 555-5555" format!',
+        pattern: /^\(\d{3}\) \d{3}-\d{4}$/i,
+      }],
+    }, 'Fax', 'State'],
+    toolbar: {
+      items: [
+        {
+          name: 'validate',
+          widget: 'dxButton',
+          options: {
+            text: 'Validate DataGrid',
+            stylingMode: 'outlined',
+            onClick() {
+              validateVisibleRows();
+            },
+          },
+        },
+        'saveButton',
+        'revertButton',
+      ],
     },
+    showBorders: true,
   });
 });
+
+function validateVisibleRows() {
+  const grid = $('#gridContainer').dxDataGrid('instance');
+  const currentChanges = grid.option('editing.changes');
+  const fakeChanges = grid.getVisibleRows().map((row) => ({ type: 'update', key: row.key, data: {} }));
+
+  grid.option('editing.changes', [...currentChanges, ...fakeChanges]);
+  grid.repaint();
+
+  grid.getController('validating').validate(true).then((result) => {
+    const message = result ? 'Validation is passed' : 'Validation is failed';
+    const type = result ? 'success' : 'error';
+    DevExpress.ui.notify({
+      message,
+      type,
+      position: {
+        offset: '0 50',
+        at: 'bottom',
+        of: '.demo-container',
+      },
+    });
+  });
+}