Skip to content

Commit db635ae

Browse files
DiyanDimitrovDiyanDimitrov
committed
feat(tree-grid): create stubs for the tree-grid component #2530 
1 parent e83083d commit db635ae

File tree

5 files changed

+184
-0
lines changed

5 files changed

+184
-0
lines changed

‎projects/igniteui-angular/src/lib/tree-grid/index.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export * from '../grid-common/index';
2+
export * from './tree-grid.component';
3+
// export * from './grid.misc';
4+
export * from './tree-grid.module';
5+
export * from './tree-grid-api.service';
6+
export * from './tree-grid-row.component';

‎projects/igniteui-angular/src/lib/tree-grid/tree-grid-api.service.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { IGridAPIService } from '../grid-common/api.service';
2+
import { IgxTreeGridComponent } from './tree-grid.component';
3+
4+
import { cloneArray } from '../core/utils';
5+
import { DataUtil } from '../data-operations/data-util';
6+
import { ISortingExpression, SortingDirection } from '../data-operations/sorting-expression.interface';
7+
8+
export class IgxTreeGridAPIService extends IGridAPIService<IgxTreeGridComponent> {
9+
public on_after_content_init(id: string) {
10+
// const grid = this.get(id);
11+
// if (grid.groupTemplate) {
12+
// grid.groupRowTemplate = grid.groupTemplate.template;
13+
// }
14+
15+
super.on_after_content_init(id);
16+
}
17+
}

‎projects/igniteui-angular/src/lib/tree-grid/tree-grid-row.component.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Component, forwardRef } from '@angular/core';
2+
import { IgxTreeGridComponent } from './tree-grid.component';
3+
import { IgxRowComponent } from '../grid-common/row.component';
4+
5+
@Component({
6+
selector: 'igx-tree-grid-row',
7+
templateUrl: '../grid-common/row.component.html',
8+
providers: [{provide: IgxRowComponent, useExisting: forwardRef(() => IgxTreeGridRowComponent)}]
9+
})
10+
export class IgxTreeGridRowComponent extends IgxRowComponent<IgxTreeGridComponent> {
11+
}

‎projects/igniteui-angular/src/lib/tree-grid/tree-grid.component.ts

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import {
2+
ContentChild,
3+
ChangeDetectionStrategy,
4+
ChangeDetectorRef,
5+
Component,
6+
ComponentFactoryResolver,
7+
ElementRef,
8+
HostBinding,
9+
Input,
10+
IterableDiffers,
11+
QueryList,
12+
TemplateRef,
13+
ViewChild,
14+
ViewChildren,
15+
ViewContainerRef
16+
} from '@angular/core';
17+
import { IgxSelectionAPIService } from '../core/selection';
18+
import { cloneArray, DisplayDensity } from '../core/utils';
19+
import { ISortingExpression } from '../data-operations/sorting-expression.interface';
20+
import { IgxTreeGridAPIService } from './tree-grid-api.service';
21+
import { IgxGridBaseComponent } from '../grid-common/grid-base.component';
22+
23+
import { IGridBaseComponent } from '../grid-common/common/grid-interfaces';
24+
import { IGridAPIService } from '../grid-common/api.service';
25+
26+
let NEXT_ID = 0;
27+
28+
/**
29+
* **Ignite UI for Angular Grid** -
30+
* [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid.html)
31+
*
32+
* The Ignite UI Grid is used for presenting and manipulating tabular data in the simplest way possible. Once data
33+
* has been bound, it can be manipulated through filtering, sorting & editing operations.
34+
*
35+
* Example:
36+
* ```html
37+
* <igx-grid [data]="employeeData" autoGenerate="false">
38+
* <igx-column field="first" header="First Name"></igx-column>
39+
* <igx-column field="last" header="Last Name"></igx-column>
40+
* <igx-column field="role" header="Role"></igx-column>
41+
* </igx-grid>
42+
* ```
43+
*/
44+
@Component({
45+
changeDetection: ChangeDetectionStrategy.OnPush,
46+
preserveWhitespaces: false,
47+
selector: 'igx-tree-grid',
48+
templateUrl: './grid.component.html'
49+
})
50+
export class IgxTreeGridComponent extends IgxGridBaseComponent {
51+
private _id = `igx-tree-grid-${NEXT_ID++}`;
52+
53+
/**
54+
* An @Input property that sets the value of the `id` attribute. If not provided it will be automatically generated.
55+
* ```html
56+
* <igx-grid [id]="'igx-grid-1'" [data]="Data" [autoGenerate]="true"></igx-grid>
57+
* ```
58+
* @memberof IgxGridComponent
59+
*/
60+
@HostBinding('attr.id')
61+
@Input()
62+
public get id(): string {
63+
return this._id;
64+
}
65+
public set id(value: string) {
66+
if (this._id !== value) {
67+
const oldId = this._id;
68+
this._id = value;
69+
this.gridAPI.reset(oldId, this._id);
70+
}
71+
}
72+
73+
private gridAPI: IgxTreeGridAPIService;
74+
75+
constructor(
76+
gridAPI: IGridAPIService<IGridBaseComponent>,
77+
selection: IgxSelectionAPIService,
78+
elementRef: ElementRef,
79+
cdr: ChangeDetectorRef,
80+
resolver: ComponentFactoryResolver,
81+
differs: IterableDiffers,
82+
viewRef: ViewContainerRef) {
83+
super(gridAPI, selection, elementRef, cdr, resolver, differs, viewRef);
84+
this.gridAPI = <IgxTreeGridAPIService>gridAPI;
85+
}
86+
87+
/**
88+
* @hidden
89+
*/
90+
public getContext(rowData): any {
91+
return {
92+
$implicit: rowData,
93+
// templateID: this.isGroupByRecord(rowData) ? 'groupRow' : 'dataRow'
94+
};
95+
}
96+
}

‎projects/igniteui-angular/src/lib/tree-grid/tree-grid.module.ts

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { CommonModule } from '@angular/common';
2+
import { NgModule } from '@angular/core';
3+
import { FormsModule } from '@angular/forms';
4+
import { IgxTreeGridAPIService } from './tree-grid-api.service';
5+
// import {
6+
// IgxCellEditorTemplateDirective,
7+
// IgxCellFooterTemplateDirective,
8+
// IgxCellHeaderTemplateDirective,
9+
// IgxCellTemplateDirective,
10+
// IgxGroupAreaDropDirective,
11+
// IgxGroupByRowTemplateDirective
12+
// } from './grid.misc';
13+
import { IgxTreeGridComponent } from './tree-grid.component';
14+
// import {
15+
// IgxGridPagingPipe,
16+
// IgxGridPostGroupingPipe,
17+
// IgxGridPreGroupingPipe
18+
// } from './grid.pipes';
19+
import { IgxTreeGridRowComponent } from './tree-grid-row.component';
20+
import { IgxChipsModule } from '../chips/chips.module';
21+
import { IgxGridCommonModule } from '../grid-common/common/grid-common.module';
22+
23+
@NgModule({
24+
declarations: [
25+
IgxTreeGridComponent,
26+
IgxTreeGridRowComponent,
27+
// IgxCellFooterTemplateDirective,
28+
// IgxCellHeaderTemplateDirective,
29+
// IgxCellEditorTemplateDirective,
30+
// IgxCellTemplateDirective
31+
],
32+
exports: [
33+
IgxTreeGridComponent,
34+
IgxTreeGridRowComponent,
35+
// IgxCellFooterTemplateDirective,
36+
// IgxCellHeaderTemplateDirective,
37+
// IgxCellEditorTemplateDirective,
38+
// IgxCellTemplateDirective,
39+
IgxGridCommonModule
40+
],
41+
imports: [
42+
CommonModule,
43+
FormsModule,
44+
IgxChipsModule,
45+
IgxGridCommonModule.forRoot(IgxTreeGridAPIService)
46+
]
47+
})
48+
export class IgxTreeGridModule {
49+
public static forRoot() {
50+
return {
51+
ngModule: IgxTreeGridModule
52+
};
53+
}
54+
}

0 commit comments

Comments
 (0)