-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Angular/src/app/app.component.scss b/Angular/src/app/app.component.scss
index d643730..2810200 100644
--- a/Angular/src/app/app.component.scss
+++ b/Angular/src/app/app.component.scss
@@ -1,4 +1,5 @@
-.default-style {
+.demo-container {
margin: 50px;
width: 90vh;
}
+
diff --git a/Angular/src/app/app.component.ts b/Angular/src/app/app.component.ts
index 9e09ad6..9c56ea7 100644
--- a/Angular/src/app/app.component.ts
+++ b/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',
+ },
+ });
+ });
+ }
}
}
diff --git a/Angular/src/app/app.module.ts b/Angular/src/app/app.module.ts
index b9e30aa..b682527 100644
--- a/Angular/src/app/app.module.ts
+++ b/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: [],
diff --git a/Angular/src/app/app.service.ts b/Angular/src/app/app.service.ts
new file mode 100644
index 0000000..fc30f4e
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/README.md b/README.md
index 9687e9f..3e99775 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,4 @@
-
[](https://supportcenter.devexpress.com/ticket/details/T1202789)
[](https://docs.devexpress.com/GeneralInformation/403183)