Skip to content

Commit e4aca44

Browse files
alexslavralexslavr
committed
Generate DataGrid, TreeList editing form nesteds (#31736)
1 parent 947e2aa commit e4aca44

21 files changed

Lines changed: 2434 additions & 60 deletions

‎packages/devextreme-angular/src/core/tokens/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ export const PROPERTY_TOKEN_alerts = new InjectionToken<string>('property-token-
2020
export const PROPERTY_TOKEN_attachments = new InjectionToken<string>('property-token-attachments');
2121
export const PROPERTY_TOKEN_typingUsers = new InjectionToken<string>('property-token-typingUsers');
2222
export const PROPERTY_TOKEN_ranges = new InjectionToken<string>('property-token-ranges');
23-
export const PROPERTY_TOKEN_groupItems = new InjectionToken<string>('property-token-groupItems');
2423
export const PROPERTY_TOKEN_sortByGroupSummaryInfo = new InjectionToken<string>('property-token-sortByGroupSummaryInfo');
2524
export const PROPERTY_TOKEN_totalItems = new InjectionToken<string>('property-token-totalItems');
2625
export const PROPERTY_TOKEN_commands = new InjectionToken<string>('property-token-commands');
@@ -42,3 +41,4 @@ export const PROPERTY_TOKEN_views = new InjectionToken<string>('property-token-v
4241
export const PROPERTY_TOKEN_layers = new InjectionToken<string>('property-token-layers');
4342
export const PROPERTY_TOKEN_legends = new InjectionToken<string>('property-token-legends');
4443
export const PROPERTY_TOKEN_center = new InjectionToken<string>('property-token-center');
44+
export const PROPERTY_TOKEN_groupItems = new InjectionToken<string>('property-token-groupItems');

‎packages/devextreme-angular/src/ui/data-grid/index.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -213,6 +213,11 @@ import { DxiDataGridToolbarItemModule } from 'devextreme-angular/ui/data-grid/ne
213213
import { DxiDataGridTotalItemModule } from 'devextreme-angular/ui/data-grid/nested';
214214
import { DxiDataGridValidationRuleModule } from 'devextreme-angular/ui/data-grid/nested';
215215
import { DxoDataGridValueFormatModule } from 'devextreme-angular/ui/data-grid/nested';
216+
import { DxiDataGridButtonItemModule } from 'devextreme-angular/ui/data-grid/nested';
217+
import { DxiDataGridEmptyItemModule } from 'devextreme-angular/ui/data-grid/nested';
218+
import { DxiDataGridSimpleItemModule } from 'devextreme-angular/ui/data-grid/nested';
219+
import { DxiDataGridTabbedItemModule } from 'devextreme-angular/ui/data-grid/nested';
220+
import { DxiDataGridTabModule } from 'devextreme-angular/ui/data-grid/nested';
216221
import {
217222
PROPERTY_TOKEN_validationRules,
218223
PROPERTY_TOKEN_buttons,
@@ -225,6 +230,7 @@ import {
225230
PROPERTY_TOKEN_sortByGroupSummaryInfo,
226231
PROPERTY_TOKEN_toolbarItems,
227232
PROPERTY_TOKEN_totalItems,
233+
PROPERTY_TOKEN_tabs,
228234
} from 'devextreme-angular/core/tokens';
229235

230236

@@ -302,6 +308,11 @@ export class DxDataGridComponent<TRowData = any, TKey = any> extends DxComponent
302308
this.setChildren('totalItems', value);
303309
}
304310

311+
@ContentChildren(PROPERTY_TOKEN_tabs)
312+
set _tabsContentChildren(value: QueryList<CollectionNestedOption>) {
313+
this.setChildren('tabs', value);
314+
}
315+
305316
instance: DxDataGrid<TRowData, TKey> = null;
306317

307318
/**
@@ -2509,6 +2520,11 @@ export class DxDataGridComponent<TRowData = any, TKey = any> extends DxComponent
25092520
DxiDataGridTotalItemModule,
25102521
DxiDataGridValidationRuleModule,
25112522
DxoDataGridValueFormatModule,
2523+
DxiDataGridButtonItemModule,
2524+
DxiDataGridEmptyItemModule,
2525+
DxiDataGridSimpleItemModule,
2526+
DxiDataGridTabbedItemModule,
2527+
DxiDataGridTabModule,
25122528
DxIntegrationModule,
25132529
DxTemplateModule
25142530
],
@@ -2672,6 +2688,11 @@ export class DxDataGridComponent<TRowData = any, TKey = any> extends DxComponent
26722688
DxiDataGridTotalItemModule,
26732689
DxiDataGridValidationRuleModule,
26742690
DxoDataGridValueFormatModule,
2691+
DxiDataGridButtonItemModule,
2692+
DxiDataGridEmptyItemModule,
2693+
DxiDataGridSimpleItemModule,
2694+
DxiDataGridTabbedItemModule,
2695+
DxiDataGridTabModule,
26752696
DxTemplateModule
26762697
]
26772698
})

‎packages/devextreme-angular/src/ui/data-grid/nested/button-item-dxi.ts‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
/* tslint:disable:max-line-length */
2+
3+
4+
import {
5+
Component,
6+
NgModule,
7+
Host,
8+
SkipSelf,
9+
Input
10+
} from '@angular/core';
11+
12+
13+
14+
15+
import { dxButtonOptions } from 'devextreme/ui/button';
16+
import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common';
17+
import { FormItemType, FormPredefinedButtonItem } from 'devextreme/ui/form';
18+
19+
import {
20+
DxIntegrationModule,
21+
NestedOptionHost,
22+
} from 'devextreme-angular/core';
23+
import { CollectionNestedOption } from 'devextreme-angular/core';
24+
25+
import { PROPERTY_TOKEN_items } from 'devextreme-angular/core/tokens';
26+
27+
@Component({
28+
selector: 'dxi-data-grid-button-item',
29+
standalone: true,
30+
template: '',
31+
styles: [''],
32+
imports: [ DxIntegrationModule ],
33+
providers: [
34+
NestedOptionHost,
35+
{
36+
provide: PROPERTY_TOKEN_items,
37+
useExisting: DxiDataGridButtonItemComponent,
38+
}
39+
]
40+
})
41+
export class DxiDataGridButtonItemComponent extends CollectionNestedOption {
42+
@Input()
43+
get buttonOptions(): dxButtonOptions | undefined {
44+
return this._getOption('buttonOptions');
45+
}
46+
set buttonOptions(value: dxButtonOptions | undefined) {
47+
this._setOption('buttonOptions', value);
48+
}
49+
50+
@Input()
51+
get colSpan(): number | undefined {
52+
return this._getOption('colSpan');
53+
}
54+
set colSpan(value: number | undefined) {
55+
this._setOption('colSpan', value);
56+
}
57+
58+
@Input()
59+
get cssClass(): string | undefined {
60+
return this._getOption('cssClass');
61+
}
62+
set cssClass(value: string | undefined) {
63+
this._setOption('cssClass', value);
64+
}
65+
66+
@Input()
67+
get horizontalAlignment(): HorizontalAlignment {
68+
return this._getOption('horizontalAlignment');
69+
}
70+
set horizontalAlignment(value: HorizontalAlignment) {
71+
this._setOption('horizontalAlignment', value);
72+
}
73+
74+
@Input()
75+
get itemType(): FormItemType {
76+
return this._getOption('itemType');
77+
}
78+
set itemType(value: FormItemType) {
79+
this._setOption('itemType', value);
80+
}
81+
82+
@Input()
83+
get name(): FormPredefinedButtonItem | string | undefined {
84+
return this._getOption('name');
85+
}
86+
set name(value: FormPredefinedButtonItem | string | undefined) {
87+
this._setOption('name', value);
88+
}
89+
90+
@Input()
91+
get verticalAlignment(): VerticalAlignment {
92+
return this._getOption('verticalAlignment');
93+
}
94+
set verticalAlignment(value: VerticalAlignment) {
95+
this._setOption('verticalAlignment', value);
96+
}
97+
98+
@Input()
99+
get visible(): boolean {
100+
return this._getOption('visible');
101+
}
102+
set visible(value: boolean) {
103+
this._setOption('visible', value);
104+
}
105+
106+
@Input()
107+
get visibleIndex(): number | undefined {
108+
return this._getOption('visibleIndex');
109+
}
110+
set visibleIndex(value: number | undefined) {
111+
this._setOption('visibleIndex', value);
112+
}
113+
114+
115+
protected get _optionPath() {
116+
return 'items';
117+
}
118+
119+
120+
constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
121+
@Host() optionHost: NestedOptionHost) {
122+
super();
123+
parentOptionHost.setNestedOption(this);
124+
optionHost.setHost(this, this._fullOptionPath.bind(this));
125+
this.itemType = 'button';
126+
127+
}
128+
129+
130+
131+
ngOnDestroy() {
132+
this._deleteRemovedOptions(this._fullOptionPath());
133+
}
134+
135+
}
136+
137+
@NgModule({
138+
imports: [
139+
DxiDataGridButtonItemComponent
140+
],
141+
exports: [
142+
DxiDataGridButtonItemComponent
143+
],
144+
})
145+
export class DxiDataGridButtonItemModule { }

‎packages/devextreme-angular/src/ui/data-grid/nested/empty-item-dxi.ts‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
/* tslint:disable:max-line-length */
2+
3+
4+
import {
5+
Component,
6+
NgModule,
7+
Host,
8+
SkipSelf,
9+
Input
10+
} from '@angular/core';
11+
12+
13+
14+
15+
import { FormItemType } from 'devextreme/ui/form';
16+
17+
import {
18+
DxIntegrationModule,
19+
NestedOptionHost,
20+
} from 'devextreme-angular/core';
21+
import { CollectionNestedOption } from 'devextreme-angular/core';
22+
23+
import { PROPERTY_TOKEN_items } from 'devextreme-angular/core/tokens';
24+
25+
@Component({
26+
selector: 'dxi-data-grid-empty-item',
27+
standalone: true,
28+
template: '',
29+
styles: [''],
30+
imports: [ DxIntegrationModule ],
31+
providers: [
32+
NestedOptionHost,
33+
{
34+
provide: PROPERTY_TOKEN_items,
35+
useExisting: DxiDataGridEmptyItemComponent,
36+
}
37+
]
38+
})
39+
export class DxiDataGridEmptyItemComponent extends CollectionNestedOption {
40+
@Input()
41+
get colSpan(): number | undefined {
42+
return this._getOption('colSpan');
43+
}
44+
set colSpan(value: number | undefined) {
45+
this._setOption('colSpan', value);
46+
}
47+
48+
@Input()
49+
get cssClass(): string | undefined {
50+
return this._getOption('cssClass');
51+
}
52+
set cssClass(value: string | undefined) {
53+
this._setOption('cssClass', value);
54+
}
55+
56+
@Input()
57+
get itemType(): FormItemType {
58+
return this._getOption('itemType');
59+
}
60+
set itemType(value: FormItemType) {
61+
this._setOption('itemType', value);
62+
}
63+
64+
@Input()
65+
get name(): string | undefined {
66+
return this._getOption('name');
67+
}
68+
set name(value: string | undefined) {
69+
this._setOption('name', value);
70+
}
71+
72+
@Input()
73+
get visible(): boolean {
74+
return this._getOption('visible');
75+
}
76+
set visible(value: boolean) {
77+
this._setOption('visible', value);
78+
}
79+
80+
@Input()
81+
get visibleIndex(): number | undefined {
82+
return this._getOption('visibleIndex');
83+
}
84+
set visibleIndex(value: number | undefined) {
85+
this._setOption('visibleIndex', value);
86+
}
87+
88+
89+
protected get _optionPath() {
90+
return 'items';
91+
}
92+
93+
94+
constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
95+
@Host() optionHost: NestedOptionHost) {
96+
super();
97+
parentOptionHost.setNestedOption(this);
98+
optionHost.setHost(this, this._fullOptionPath.bind(this));
99+
this.itemType = 'empty';
100+
101+
}
102+
103+
104+
105+
ngOnDestroy() {
106+
this._deleteRemovedOptions(this._fullOptionPath());
107+
}
108+
109+
}
110+
111+
@NgModule({
112+
imports: [
113+
DxiDataGridEmptyItemComponent
114+
],
115+
exports: [
116+
DxiDataGridEmptyItemComponent
117+
],
118+
})
119+
export class DxiDataGridEmptyItemModule { }

‎packages/devextreme-angular/src/ui/data-grid/nested/form.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ import {
1010
SkipSelf,
1111
Input,
1212
Output,
13-
EventEmitter
13+
EventEmitter,
14+
ContentChildren,
15+
QueryList
1416
} from '@angular/core';
1517

1618

@@ -23,9 +25,13 @@ import { dxFormSimpleItem, dxFormGroupItem, dxFormTabbedItem, dxFormEmptyItem, d
2325
import {
2426
DxIntegrationModule,
2527
NestedOptionHost,
28+
CollectionNestedOption,
2629
} from 'devextreme-angular/core';
2730
import { NestedOption } from 'devextreme-angular/core';
2831

32+
import {
33+
PROPERTY_TOKEN_items,
34+
} from 'devextreme-angular/core/tokens';
2935

3036
@Component({
3137
selector: 'dxo-data-grid-form',
@@ -36,6 +42,11 @@ import { NestedOption } from 'devextreme-angular/core';
3642
providers: [NestedOptionHost]
3743
})
3844
export class DxoDataGridFormComponent extends NestedOption implements OnDestroy, OnInit {
45+
@ContentChildren(PROPERTY_TOKEN_items)
46+
set _itemsContentChildren(value: QueryList<CollectionNestedOption>) {
47+
this.setChildren('items', value);
48+
}
49+
3950
@Input()
4051
get accessKey(): string | undefined {
4152
return this._getOption('accessKey');

0 commit comments

Comments
 (0)