Merge pull request #4 from DevExpress-Examples/Angular-example

Angular Example

Angular/src/app/app.component.html

@@ -1,3 +1,42 @@
-<div class="default-style">
-  <dx-button [text]="buttonText" (onClick)="onClick($event)"></dx-button>
+<div class="demo-container">
+  <dx-data-grid
+    [dataSource]="customers"
+    keyExpr="ID"
+    [repaintChangesOnly]="true"
+    [showBorders]="true"
+  >
+    <dxo-editing
+      [(changes)]="changes"
+      mode="batch"
+      [allowUpdating]="true"
+    ></dxo-editing>
+    <dxi-column dataField="CompanyName">
+      <dxi-validation-rule type="required"></dxi-validation-rule>
+    </dxi-column>
+    <dxi-column dataField="City">
+      <dxi-validation-rule type="stringLength" [min]="4"></dxi-validation-rule>
+    </dxi-column>
+    <dxi-column dataField="Phone">
+      <dxi-validation-rule
+        type="pattern"
+        message="Your phone must have '(555) 555-5555 format!'"
+        [pattern]="pattern"
+      ></dxi-validation-rule>
+    </dxi-column>
+    <dxi-column dataField="Fax"></dxi-column>
+    <dxi-column dataField="State"></dxi-column>
+    <dxo-toolbar>
+      <dxi-item>
+        <div *dxTemplate>
+          <dx-button
+            text="Validate DataGrid"
+            stylingMode="outlined"
+            (onClick)="validateVisibleRows()"
+          ></dx-button>
+        </div>
+      </dxi-item>
+      <dxi-item name="saveButton"></dxi-item>
+      <dxi-item name="revertButton"></dxi-item>
+    </dxo-toolbar>
+  </dx-data-grid>
 </div>

Angular/src/app/app.component.scss

@@ -1,4 +1,5 @@
-.default-style {
+.demo-container {
   margin: 50px;
   width: 90vh;
 }
+

Angular/src/app/app.component.ts

@@ -1,20 +1,58 @@
-import { Component } from '@angular/core';
-import { ClickEvent } from 'devextreme/ui/button';
+import { Component, ViewChild, AfterViewChecked } from '@angular/core';
+import { DxDataGridComponent, DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
+import notify from 'devextreme/ui/notify';
+import { Customer, Service } from './app.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  providers: [Service],
 })
-export class AppComponent {
-  title = 'Angular';
+export class AppComponent implements AfterViewChecked {
+  @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent | undefined;
 
-  counter = 0;
+  checked = false;
 
-  buttonText = 'Click count: 0';
+  changes: DxDataGridTypes.DataChange[] = [];
 
-  onClick(e: ClickEvent): void {
-    this.counter++;
-    this.buttonText = `Click count: ${this.counter}`;
+  pattern = /^\(\d{3}\) \d{3}-\d{4}$/i;
+
+  customers: Customer[];
+
+  constructor(service: Service) {
+    this.customers = service.getCustomers();
+    this.validateVisibleRows = this.validateVisibleRows.bind(this);
+  }
+
+  validateVisibleRows(): void {
+    const dataGridInstance = this?.dataGrid?.instance;
+    const fakeChanges = dataGridInstance
+      ? dataGridInstance.getVisibleRows().map((row: DxDataGridTypes.Row): DxDataGridTypes.DataChange => ({ type: 'update', key: row.key, data: {} }))
+      : [];
+    this.changes = [...this.changes, ...fakeChanges];
+    this.checked = true;
+  }
+
+  ngAfterViewChecked(): void {
+    if (this.changes.length && this.checked) {
+      this.checked = false;
+      const dataGridInstance = this?.dataGrid?.instance;
+      dataGridInstance?.repaint();
+      // @ts-expect-error - getController is a private method
+      dataGridInstance?.getController('validating').validate(true).then((result: Boolean) => {
+        const message = result ? 'Validation is passed' : 'Validation is failed';
+        const type = result ? 'success' : 'error';
+        notify({
+          message,
+          type,
+          position: {
+            offset: '0 50',
+            at: 'bottom',
+            of: '.demo-container',
+          },
+        });
+      });
+    }
   }
 }

Angular/src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { DxButtonModule } from 'devextreme-angular/ui/button';
+import { DxDataGridModule, DxButtonModule } from 'devextreme-angular';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
@@ -11,6 +11,7 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     AppRoutingModule,
+    DxDataGridModule,
     DxButtonModule,
   ],
   providers: [],

Angular/src/app/app.service.ts

@@ -0,0 +1,50 @@
+import { Injectable } from '@angular/core';
+
+export interface Customer {
+  ID: number;
+
+  CompanyName: string;
+
+  Address: string;
+
+  City: string;
+
+  State: string;
+
+  Zipcode: number;
+
+  Phone: string;
+
+  Fax: string;
+
+  Website: string;
+}
+
+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',
+}];
+
+@Injectable()
+export class Service {
+  getCustomers(): Customer[] {
+    return customers;
+  }
+}

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 -->