From 0c64f2e584943a2df81c04e627b4ce6ac38c9753 Mon Sep 17 00:00:00 2001 From: Diana Gromova <16adianay@gmail.com> Date: Fri, 15 Dec 2023 21:22:02 +0400 Subject: [PATCH 1/4] Angular Example --- Angular/src/app/app.component.html | 43 +++++++++++++++++++++-- Angular/src/app/app.component.scss | 3 +- Angular/src/app/app.component.ts | 56 +++++++++++++++++++++++++----- Angular/src/app/app.module.ts | 3 +- Angular/src/app/app.service.ts | 50 ++++++++++++++++++++++++++ 5 files changed, 143 insertions(+), 12 deletions(-) create mode 100644 Angular/src/app/app.service.ts diff --git a/Angular/src/app/app.component.html b/Angular/src/app/app.component.html index 0f59cbc..f186d9e 100644 --- a/Angular/src/app/app.component.html +++ b/Angular/src/app/app.component.html @@ -1,3 +1,42 @@ -
- +
+ + + + + + + + + + + + + + + +
+ +
+ + + + +
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..42019d0 100644 --- a/Angular/src/app/app.component.ts +++ b/Angular/src/app/app.component.ts @@ -1,20 +1,60 @@ -import { Component } from '@angular/core'; +import { Component, ViewChild, AfterViewChecked } from '@angular/core'; import { ClickEvent } from 'devextreme/ui/button'; +import { DxDataGridComponent } from 'devextreme-angular/ui/data-grid'; +import type { DataChange } from 'devextreme/common/grids'; +import dxDataGrid, { Row } from 'devextreme/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: Boolean = false; - buttonText = 'Click count: 0'; + changes: 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: dxDataGrid | undefined = this?.dataGrid?.instance; + const fakeChanges: DataChange[] | undefined = dataGridInstance + ? dataGridInstance.getVisibleRows().map((row: Row) => ({ 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: any = this?.dataGrid?.instance; + dataGridInstance?.repaint(); + 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..9a93548 --- /dev/null +++ b/Angular/src/app/app.service.ts @@ -0,0 +1,50 @@ +import { Injectable } from '@angular/core'; + +export class Customer { + ID: number | undefined; + + CompanyName: string | undefined; + + Address: string | undefined; + + City: string | undefined; + + State: string | undefined; + + Zipcode: number | undefined; + + Phone: string | undefined; + + Fax: string | undefined; + + Website: string | undefined; +} + +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; + } +} From 31ea1e01432be71da18cbfb8a63bc2debe11e62c Mon Sep 17 00:00:00 2001 From: DevExpressExampleBot Date: Fri, 15 Dec 2023 21:24:14 +0400 Subject: [PATCH 2/4] README auto update [skip ci] --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index 9687e9f..3e99775 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,4 @@ -![](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) From 2ff8d7a93497266b1e8791ec7ef968053071ff02 Mon Sep 17 00:00:00 2001 From: Diana Gromova <16adianay@gmail.com> Date: Mon, 18 Dec 2023 19:44:07 +0400 Subject: [PATCH 3/4] Update TS --- Angular/src/app/app.component.ts | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/Angular/src/app/app.component.ts b/Angular/src/app/app.component.ts index 42019d0..54a126e 100644 --- a/Angular/src/app/app.component.ts +++ b/Angular/src/app/app.component.ts @@ -1,8 +1,5 @@ import { Component, ViewChild, AfterViewChecked } from '@angular/core'; -import { ClickEvent } from 'devextreme/ui/button'; -import { DxDataGridComponent } from 'devextreme-angular/ui/data-grid'; -import type { DataChange } from 'devextreme/common/grids'; -import dxDataGrid, { Row } from 'devextreme/ui/data_grid'; +import { DxDataGridComponent, DxDataGridTypes } from 'devextreme-angular/ui/data-grid'; import notify from 'devextreme/ui/notify'; import { Customer, Service } from './app.service'; @@ -17,7 +14,7 @@ export class AppComponent implements AfterViewChecked { checked: Boolean = false; - changes: DataChange[] = []; + changes: DxDataGridTypes.DataChange[] = []; pattern = /^\(\d{3}\) \d{3}-\d{4}$/i; @@ -29,9 +26,9 @@ export class AppComponent implements AfterViewChecked { } validateVisibleRows(): void { - const dataGridInstance: dxDataGrid | undefined = this?.dataGrid?.instance; - const fakeChanges: DataChange[] | undefined = dataGridInstance - ? dataGridInstance.getVisibleRows().map((row: Row) => ({ type: 'update', key: row.key, data: {} })) + 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; @@ -40,8 +37,9 @@ export class AppComponent implements AfterViewChecked { ngAfterViewChecked(): void { if (this.changes.length && this.checked) { this.checked = false; - const dataGridInstance: any = this?.dataGrid?.instance; + 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'; From 0fe7955319e13923a059ac6719680af7f77106af Mon Sep 17 00:00:00 2001 From: Diana Gromova <16adianay@gmail.com> Date: Thu, 21 Dec 2023 18:34:13 +0400 Subject: [PATCH 4/4] change TS --- Angular/src/app/app.component.ts | 2 +- Angular/src/app/app.service.ts | 20 ++++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/Angular/src/app/app.component.ts b/Angular/src/app/app.component.ts index 54a126e..9c56ea7 100644 --- a/Angular/src/app/app.component.ts +++ b/Angular/src/app/app.component.ts @@ -12,7 +12,7 @@ import { Customer, Service } from './app.service'; export class AppComponent implements AfterViewChecked { @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent | undefined; - checked: Boolean = false; + checked = false; changes: DxDataGridTypes.DataChange[] = []; diff --git a/Angular/src/app/app.service.ts b/Angular/src/app/app.service.ts index 9a93548..fc30f4e 100644 --- a/Angular/src/app/app.service.ts +++ b/Angular/src/app/app.service.ts @@ -1,23 +1,23 @@ import { Injectable } from '@angular/core'; -export class Customer { - ID: number | undefined; +export interface Customer { + ID: number; - CompanyName: string | undefined; + CompanyName: string; - Address: string | undefined; + Address: string; - City: string | undefined; + City: string; - State: string | undefined; + State: string; - Zipcode: number | undefined; + Zipcode: number; - Phone: string | undefined; + Phone: string; - Fax: string | undefined; + Fax: string; - Website: string | undefined; + Website: string; } const customers: Customer[] = [{