Vue Example (WIP)

Vue/src/components/HomeContent.vue

@@ -1,22 +1,97 @@
-<script setup lang="ts">
-import { computed, ref } from "vue";
-
-import "devextreme/dist/css/dx.material.blue.light.compact.css";
-import DxButton from "devextreme-vue/button";
-
-const props = defineProps({
-  text: String,
-});
-const count = ref(0);
-const buttonText = computed<String>(
-  () => `Click ${props.text}: ${count.value}`
-);
-function clickHandler() {
-  count.value += 1;
-}
-</script>
 <template>
   <div>
-    <DxButton :text="buttonText" @click="clickHandler"></DxButton>
+    <DxDataGrid
+      ref="dataGridRef"
+      :data-source="customers"
+      key-expr="ID"
+      :show-borders="true"
+    >
+      <DxEditing
+        v-model:changes="changes"
+        mode="batch"
+        :allow-updating="true"
+      />
+      <DxColumn
+        data-field="CompanyName"
+      >
+        <DxRequiredRule/>
+      </DxColumn>
+      <DxColumn data-field="City">
+        <DxStringLengthRule :min="4"/>
+      </DxColumn>
+      <DxColumn data-field="Phone">
+        <DxRequiredRule/>
+        <DxPatternRule
+          message="Your phone must have '(555) 555-5555 format!'"
+          :pattern="pattern"
+        />
+      </DxColumn>
+      <DxColumn data-field="Fax"/>
+      <DxColumn data-field="State"/>
+      <DxToolbar>
+        <DxItem>
+          <DxButton
+            text="Validate DataGrid"
+            styling-mode="outlined"
+            @click="validateVisibleRows"
+          />
+        </DxItem>
+        <DxItem name="saveButton"/>
+        <DxItem name="revertButton"/>
+      </DxToolbar>
+    </DxDataGrid>
   </div>
 </template>
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue';
+import { customers } from '@/data';
+import 'devextreme/dist/css/dx.material.blue.light.compact.css';
+import DxButton from 'devextreme-vue/button';
+import DxDataGrid, {
+  DxColumn,
+  DxEditing,
+  DxPatternRule,
+  DxRequiredRule,
+  DxStringLengthRule,
+  DxToolbar,
+  DxItem,
+  DxDataGridTypes
+} from 'devextreme-vue/data-grid';
+import type dxDataGrid from 'devextreme/ui/data_grid';
+
+const pattern = /^\(\d{3}\) \d{3}-\d{4}$/i;
+const changes = ref<DxDataGridTypes.DataChange[]>([]);
+const clicked = ref(false);
+const dataGridRef = ref<DxDataGrid>();
+const obj = reactive({ changes });
+
+const validateVisibleRows = () => {
+  const dataGridInstance = dataGridRef.value?.instance! as dxDataGrid;
+  const fakeChanges = dataGridInstance
+    ? dataGridInstance
+      .getVisibleRows()
+      .map((row: DxDataGridTypes.Row) : DxDataGridTypes.DataChange => ({
+        type: 'update',
+        key: row.key,
+        data: {}
+      }))
+    : [];
+  obj.changes = [...changes.value, ...fakeChanges];
+  clicked.value = true;
+};
+
+watch(changes, () => {
+  requestAnimationFrame(() => {
+    const dataGridInstance = dataGridRef.value?.instance! as dxDataGrid;
+    dataGridInstance?.repaint();
+    dataGridInstance?.getController('validating').validate(true).then((result: Boolean) => {
+      const message = result ? 'Validation is passed' : 'Validation is failed';
+      const type = result ? 'success' : 'error';
+      console.log(type);
+    });
+    clicked.value = false;
+  });
+
+}, {});
+
+</script>

Vue/src/data.ts

@@ -0,0 +1,41 @@
+export type 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',
+}];