Skip to content

Commit 3f1567e

Browse files
kdinevkdinev
authored
Merge pull request #226 from MayaKirova/featureList-populating
Populating featuresList when using using GridOptions
2 parents 5b87976 + 61d1512 commit 3f1567e

File tree

3 files changed

+211
-6
lines changed

3 files changed

+211
-6
lines changed

‎src/iggrid/features.directive.ts‎

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Directive, AfterContentInit, ContentChild } from "@angular/core";
1+
import { Directive, AfterContentInit, ContentChild, ElementRef } from "@angular/core";
22
import { IgGridSortingFeature } from "./iggridfeatures/iggridsorting.directive";
33
import { IgGridFilteringFeature } from "./iggridfeatures/iggridfiltering.directive";
44
import { IgGridPagingFeature } from "./iggridfeatures/iggridpaging.directive";
@@ -22,12 +22,13 @@ import { IgGridMultiColumnHeadersFeature } from "./iggridfeatures/iggridmulticol
2222
})
2323
export class Features implements AfterContentInit {
2424
public allFeatures:Array<any> = new Array<any>()
25+
2526
@ContentChild(IgGridSortingFeature) sorting: IgGridSortingFeature;
2627
@ContentChild(IgGridFilteringFeature) filtering: IgGridFilteringFeature;
2728
@ContentChild(IgGridPagingFeature) paging: IgGridPagingFeature;
2829
@ContentChild(IgGridUpdatingFeature) updating: IgGridUpdatingFeature;
2930
@ContentChild(IgGridGroupByFeature) groupBy: IgGridGroupByFeature;
30-
@ContentChild(IgGridColumnMovingFeature) moving: IgGridColumnMovingFeature;
31+
@ContentChild(IgGridColumnMovingFeature) columnMoving: IgGridColumnMovingFeature;
3132
@ContentChild(IgGridHidingFeature) hiding: IgGridHidingFeature;
3233
@ContentChild(IgGridCellMergingFeature) cellMerging: IgGridCellMergingFeature;
3334
@ContentChild(IgGridResponsiveFeature) responsive: IgGridResponsiveFeature;
@@ -40,13 +41,42 @@ export class Features implements AfterContentInit {
4041
@ContentChild(IgGridAppendRowsOnDemandFeature) appendRowsOnDemand: IgGridAppendRowsOnDemandFeature;
4142
@ContentChild(IgGridMultiColumnHeadersFeature) multiColumnHeaders: IgGridMultiColumnHeadersFeature;
4243

44+
addFeature(name, parent){
45+
var nodeName = name.replace(/([A-Z])/g, function (g) { return '-' + g[0].toLowerCase() });
46+
var el = document.createElement(nodeName);
47+
el = parent.appendChild(el);
48+
var child = new ElementRef(el);
49+
50+
switch(nodeName) {
51+
case "filtering": this.filtering = new IgGridFilteringFeature(child);break;
52+
case "sorting": this.sorting = new IgGridSortingFeature(child); break;
53+
case "paging": this.paging = new IgGridPagingFeature(child); break;
54+
case "updating": this.updating = new IgGridUpdatingFeature(child); break;
55+
case "group-by": this.groupBy = new IgGridGroupByFeature(child); break;
56+
case "column-moving": this.columnMoving = new IgGridColumnMovingFeature(child); break;
57+
case "hiding": this.hiding = new IgGridHidingFeature(child); break;
58+
case "responsive": this.responsive = new IgGridResponsiveFeature(child); break;
59+
case "cell-merging": this.cellMerging = new IgGridCellMergingFeature(child); break;
60+
case "resizing": this.resizing = new IgGridResizingFeature(child); break;
61+
case "selection": this.selection = new IgGridSelectionFeature(child); break;
62+
case "row-selectors": this.rowSelectors = new IgGridRowSelectorsFeature(child); break;
63+
case "summaries": this.summaries = new IgGridSummariesFeature(child); break;
64+
case "column-fixing": this.columnFixing = new IgGridColumnFixingFeature(child); break;
65+
case "tooltips": this.tooltips = new IgGridTooltipsFeature(child); break;
66+
case "append-rows-on-demand": this.appendRowsOnDemand = new IgGridAppendRowsOnDemandFeature(child); break;
67+
case "multi-column-headers": this.multiColumnHeaders = new IgGridMultiColumnHeadersFeature(child); break;
68+
}
69+
this[name].ngOnInit();
70+
this.allFeatures.push(this[name]);
71+
72+
}
4373
ngAfterContentInit() {
4474
this.filtering ? this.allFeatures.push(this.filtering): null;
4575
this.sorting ? this.allFeatures.push(this.sorting): null;
4676
this.paging ? this.allFeatures.push(this.paging): null;
4777
this.updating ? this.allFeatures.push(this.updating): null;
4878
this.groupBy ? this.allFeatures.push(this.groupBy): null;
49-
this.moving ? this.allFeatures.push(this.moving): null;
79+
this.columnMoving ? this.allFeatures.push(this.columnMoving): null;
5080
this.hiding ? this.allFeatures.push(this.hiding): null;
5181
this.responsive ? this.allFeatures.push(this.responsive): null;
5282
this.cellMerging ? this.allFeatures.push(this.cellMerging): null;

‎src/iggrid/iggridbase.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {AfterContentInit, QueryList, ContentChild, ContentChildren, ElementRef,
33
import { Column } from './column.directive';
44
import { Features } from './features.directive';
55

6-
export class IgGridBase<Model> extends IgControlBase<Model> implements AfterContentInit {
6+
export class IgGridBase<Model> extends IgControlBase<Model> implements AfterContentInit {
77
protected _dataSource: any;
88
protected _changes: any;
99
@ContentChildren(Column) _columns: QueryList<Column>;
@@ -16,7 +16,6 @@ export class IgGridBase<Model> extends IgControlBase<Model> implements AfterCont
1616
jQuery.extend(true, [], this._opts.dataSource) :
1717
jQuery.extend(true, [], this._config.dataSource);
1818
}
19-
2019
ngAfterContentInit() {
2120
if (this._columns && this._columns.length) {
2221
if (this._config) {
@@ -32,6 +31,14 @@ export class IgGridBase<Model> extends IgControlBase<Model> implements AfterCont
3231
this._opts["features"] = this.featuresList.allFeatures.map((c) => { return c.initSettings;});
3332
}
3433
}
34+
if(this._config && this._config["features"] && !this.featuresList){
35+
this.featuresList = new Features();
36+
//populate featuresList
37+
for(var i=0; i < this._config["features"].length; i++){
38+
var featureName = this._config["features"][i].name.charAt(0).toLowerCase() + this._config["features"][i].name.slice(1);
39+
this.featuresList.addFeature(featureName, this._el);
40+
}
41+
}
3542
super.ngOnInit();
3643
}
3744

‎tests/unit/iggrid/grid.spec.ts‎

Lines changed: 169 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -643,6 +643,69 @@ export function main() {
643643
}, 500);
644644
});
645645
});
646+
it('should populate featuerList when features are defined via grid options.', (done) => {
647+
var template = '<div><ig-grid [(widgetId)]="gridID" [(options)]="optsAllFeatures" [(dataSource)]="data1"></ig-grid></div>';
648+
TestBed.overrideComponent(TestComponent, {
649+
set: {
650+
template: template
651+
}
652+
});
653+
TestBed.compileComponents().then(() => {
654+
let fixture = TestBed.createComponent(TestComponent);
655+
fixture.detectChanges();
656+
var list = fixture.componentInstance.viewChild.featuresList;
657+
expect(list.allFeatures.length).toBe(14);
658+
expect(list.updating !== undefined).toBeTruthy("Feature should be populated.");
659+
expect(list.filtering !== undefined).toBeTruthy("Feature should be populated.");
660+
expect(list.paging !== undefined).toBeTruthy("Feature should be populated.");
661+
expect(list.columnFixing !== undefined).toBeTruthy("Feature should be populated.");
662+
expect(list.columnMoving !== undefined).toBeTruthy("Feature should be populated.");
663+
expect(list.sorting !== undefined).toBeTruthy("Feature should be populated.");
664+
expect(list.tooltips !== undefined).toBeTruthy("Feature should be populated.");
665+
expect(list.cellMerging !== undefined).toBeTruthy("Feature should be populated.");
666+
expect(list.selection !== undefined).toBeTruthy("Feature should be populated.");
667+
expect(list.rowSelectors !== undefined).toBeTruthy("Feature should be populated.");
668+
expect(list.resizing !== undefined).toBeTruthy("Feature should be populated.");
669+
expect(list.multiColumnHeaders !== undefined).toBeTruthy("Feature should be populated.");
670+
expect(list.columnFixing !== undefined).toBeTruthy("Feature should be populated.");
671+
expect(list.summaries !== undefined).toBeTruthy("Feature should be populated.");
672+
done();
673+
});
674+
});
675+
676+
it('should populate featuerList when features are defined via grid options - part 2.', (done) => {
677+
var template = '<div><ig-grid [(widgetId)]="gridID" [(options)]="optsAllFeatures2" [(dataSource)]="data1"></ig-grid></div>';
678+
TestBed.overrideComponent(TestComponent, {
679+
set: {
680+
template: template
681+
}
682+
});
683+
TestBed.compileComponents().then(() => {
684+
let fixture = TestBed.createComponent(TestComponent);
685+
fixture.detectChanges();
686+
var list = fixture.componentInstance.viewChild.featuresList;
687+
expect(list.allFeatures.length).toBe(2);
688+
expect(list.appendRowsOnDemand !== undefined).toBeTruthy("Feature should be populated.");
689+
expect(list.responsive !== undefined).toBeTruthy("Feature should be populated.");
690+
done();
691+
});
692+
});
693+
it('should populate featuerList when features are defined via grid options - part 3.', (done) => {
694+
var template = '<div><ig-grid [(widgetId)]="gridID" [(options)]="optsAllFeatures3" [(dataSource)]="data1"></ig-grid></div>';
695+
TestBed.overrideComponent(TestComponent, {
696+
set: {
697+
template: template
698+
}
699+
});
700+
TestBed.compileComponents().then(() => {
701+
let fixture = TestBed.createComponent(TestComponent);
702+
fixture.detectChanges();
703+
var list = fixture.componentInstance.viewChild.featuresList;
704+
expect(list.allFeatures.length).toBe(1);
705+
expect(list.groupBy !== undefined).toBeTruthy("Feature should be populated.");
706+
done();
707+
});
708+
});
646709
});
647710
}
648711

@@ -667,6 +730,9 @@ class TestComponent {
667730
public caption: string;
668731
public idHeaderText: string;
669732
public gridWidth: string;
733+
public optsAllFeatures:any;
734+
public optsAllFeatures2:any;
735+
public optsAllFeatures3:any;
670736
@ViewChild(Infragistics.IgGridComponent) public viewChild: Infragistics.IgGridComponent;
671737

672738
constructor() {
@@ -741,6 +807,108 @@ class TestComponent {
741807
}
742808
]
743809
};
810+
this.optsAllFeatures = {
811+
width: "700px",
812+
height: "400px",
813+
autoCommit: true,
814+
autoGenerateColumns: false,
815+
columns: [
816+
{ key: "Id", headerText: "ID", width: "100px", dataType: "string" },
817+
{ key: "Date", headerText: "Date", dataType: "date", width: "100px", format: "dd/MM/yyyy" },
818+
],
819+
primaryKey: "Id",
820+
features: [
821+
{
822+
name: "Filtering"
823+
},
824+
{
825+
name: "Updating"
826+
},
827+
{
828+
name: "Paging"
829+
},
830+
{
831+
name: "ColumnFixing"
832+
},
833+
{
834+
name: "Sorting"
835+
},
836+
{
837+
name: "Summaries"
838+
},
839+
{
840+
name: "Hiding"
841+
},
842+
{
843+
name: "ColumnMoving"
844+
},
845+
{
846+
name: "Tooltips"
847+
},
848+
{
849+
name: "CellMerging"
850+
},
851+
{
852+
name: "Selection"
853+
},
854+
{
855+
name: "RowSelectors"
856+
},
857+
//{
858+
//name: "AppendRowsOnDemand"
859+
//},
860+
//{
861+
//name: "GroupBy"
862+
//},
863+
{
864+
name: "Resizing"
865+
},
866+
{
867+
name: "MultiColumnHeaders"
868+
},
869+
//{
870+
// name: "Responsive"
871+
//}
872+
]
873+
};
874+
this.optsAllFeatures2 = {
875+
width: "700px",
876+
height: "400px",
877+
autoCommit: true,
878+
autoGenerateColumns: false,
879+
columns: [
880+
{ key: "Id", headerText: "ID", width: "100px", dataType: "string" },
881+
{ key: "Date", headerText: "Date", dataType: "date", width: "100px", format: "dd/MM/yyyy" },
882+
],
883+
primaryKey: "Id",
884+
features: [
885+
{
886+
name: "AppendRowsOnDemand"
887+
},
888+
{
889+
name: "Responsive"
890+
}
891+
]
892+
};
893+
894+
this.optsAllFeatures3 = {
895+
width: "700px",
896+
height: "400px",
897+
autoCommit: true,
898+
autoGenerateColumns: false,
899+
columns: [
900+
{ key: "Id", headerText: "ID", width: "100px", dataType: "string" },
901+
{ key: "Date", headerText: "Date", dataType: "date", width: "100px", format: "dd/MM/yyyy" },
902+
],
903+
primaryKey: "Id",
904+
features: [
905+
{
906+
name:"GroupBy"
907+
}
908+
]
909+
};
910+
911+
744912
this.optsNew = {
745913
dataSource: this.singleRecData,
746914
height: "300px",
@@ -752,7 +920,7 @@ class TestComponent {
752920
{ key: "Age", headerText: "Age", dataType: "number", width: "100px", template: "Age: ${Age}" },
753921
{ key: "HireDate", headerText: "HireDate", dataType: "date", width: "100px" },
754922
]};
755-
}
923+
};
756924

757925
public cellClickHandler(evt) {
758926
this.firedEvent = evt;

0 commit comments

Comments
 (0)