From bcf2f01cde5c98291c476e1afacc296b4fecf8f5 Mon Sep 17 00:00:00 2001 From: Maya Date: Fri, 3 Feb 2017 19:13:15 +0200 Subject: [PATCH 1/5] Adding test for calling methods via component in Grid --- tests/unit/iggrid/grid.spec.ts | 48 ++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/tests/unit/iggrid/grid.spec.ts b/tests/unit/iggrid/grid.spec.ts index e41d8d1..e3d06fe 100644 --- a/tests/unit/iggrid/grid.spec.ts +++ b/tests/unit/iggrid/grid.spec.ts @@ -367,6 +367,54 @@ export function main() { }); }); + it('should allow calling component and feature methods', (done) => { + var template = "" + + "" + + "" + + "" + + "" + + "" + + "" + + ""; + TestBed.overrideComponent(TestComponent, { + set: { + template: template + } + }); + TestBed.compileComponents().then(() => { + let fixture = TestBed.createComponent(TestComponent); + fixture.detectChanges(); + + //check if grid method calls return correct values + var rows = fixture.componentInstance.viewChild.allRows(); + expect(rows.length).toBe(2); + var cellVal = fixture.componentInstance.viewChild.getCellValue(1, "Name"); + expect(cellVal).toBe("John Smith"); + + //call paging feature's api methods + var paging = fixture.componentInstance.viewChild.featuresList.paging; + + paging.pageSize(1); + + rows = fixture.componentInstance.viewChild.allRows(); + expect(rows.length).toBe(1); + cellVal = fixture.componentInstance.viewChild.getCellValue(1, "Name"); + expect(cellVal).toBe("John Smith"); + + paging.pageIndex(1); + + rows = fixture.componentInstance.viewChild.allRows(); + expect(rows.length).toBe(1); + cellVal = fixture.componentInstance.viewChild.getCellValue(1, "Name"); + expect(cellVal).toBe("Mary Johnson"); + + done(); + + }); + + + }) + it('should allow filtering after new data is applied', (done) => { var template = '
'; TestBed.overrideComponent(TestComponent, { From 6e03260502adfb3f5abfc3432d3be70b3d2b475d Mon Sep 17 00:00:00 2001 From: Maya Date: Fri, 3 Feb 2017 19:19:04 +0200 Subject: [PATCH 2/5] Fixing test --- tests/unit/iggrid/grid.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/unit/iggrid/grid.spec.ts b/tests/unit/iggrid/grid.spec.ts index e3d06fe..1f1e0f8 100644 --- a/tests/unit/iggrid/grid.spec.ts +++ b/tests/unit/iggrid/grid.spec.ts @@ -405,8 +405,8 @@ export function main() { rows = fixture.componentInstance.viewChild.allRows(); expect(rows.length).toBe(1); - cellVal = fixture.componentInstance.viewChild.getCellValue(1, "Name"); - expect(cellVal).toBe("Mary Johnson"); + var cell = fixture.componentInstance.viewChild.cellAt(1, 0, false); + expect(cell.nodeValue).toBe("Mary Johnson"); done(); From d6c61125414456a2cade65f356971096d205c3d5 Mon Sep 17 00:00:00 2001 From: Maya Date: Fri, 3 Feb 2017 19:22:25 +0200 Subject: [PATCH 3/5] Fixing test --- tests/unit/iggrid/grid.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/unit/iggrid/grid.spec.ts b/tests/unit/iggrid/grid.spec.ts index 1f1e0f8..2fa1b2a 100644 --- a/tests/unit/iggrid/grid.spec.ts +++ b/tests/unit/iggrid/grid.spec.ts @@ -406,7 +406,7 @@ export function main() { rows = fixture.componentInstance.viewChild.allRows(); expect(rows.length).toBe(1); var cell = fixture.componentInstance.viewChild.cellAt(1, 0, false); - expect(cell.nodeValue).toBe("Mary Johnson"); + expect(cell.innerHTML).toBe("Mary Johnson"); done(); From 4dc5470a8f2a6b4cfa581a1484143b27a101adaa Mon Sep 17 00:00:00 2001 From: Maya Date: Mon, 6 Feb 2017 18:39:17 +0200 Subject: [PATCH 4/5] Adding sample with calling API methods & fixing issue when api and event name are the same --- index.html | 1 + samples/igGrid-callingMethods/app.ts | 155 ++++++++++++++++++ .../igGrid-APIMethodsTemplate.html | 56 +++++++ .../igGrid-callingMethods.html | 104 ++++++++++++ src/igniteui.angular2.ts | 13 +- 5 files changed, 328 insertions(+), 1 deletion(-) create mode 100644 samples/igGrid-callingMethods/app.ts create mode 100644 samples/igGrid-callingMethods/igGrid-APIMethodsTemplate.html create mode 100644 samples/igGrid-callingMethods/igGrid-callingMethods.html diff --git a/index.html b/index.html index 71d3cf0..ce3be86 100644 --- a/index.html +++ b/index.html @@ -208,6 +208,7 @@

Samples

  • Top-level template options
  • Complex template options
  • Grid with HTTP client
    • +
  • Calling API methods
    • igHierarchicalGrid diff --git a/samples/igGrid-callingMethods/app.ts b/samples/igGrid-callingMethods/app.ts new file mode 100644 index 0000000..53ec502 --- /dev/null +++ b/samples/igGrid-callingMethods/app.ts @@ -0,0 +1,155 @@ +import { Component, NgModule, ViewChild } from '@angular/core'; +import { IgGridComponent, Column, Features, IgGridPagingFeature, IgGridSelectionFeature, IgGridFilteringFeature, IgComboComponent, + IgTextEditorComponent, IgNumericEditorComponent, IgDateEditorComponent } from "../../src/igniteui.angular2"; +import { FormsModule } from '@angular/forms'; +import { Northwind } from "./../data/northwind"; +import { BrowserModule } from '@angular/platform-browser'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +declare var jQuery: any; + +@Component({ + selector: 'my-app', + templateUrl: "./igGrid-APIMethodsTemplate.html" +}) +export class AppComponent { + private cols: Array; + private id: string; + private data: any; + private pKey: string; + private filteringConditions:Array; + private pageSizes:Array; + private pageIndexes:Array; + private filterColType: string; + private currPageSize: number; + + @ViewChild("grid") grid: IgGridComponent; + @ViewChild("columnsCombo") columnsCombo: IgComboComponent; + @ViewChild("condCombo") condCombo: IgComboComponent; + @ViewChild("exprEditor") strExprEditor: IgTextEditorComponent; + @ViewChild("exprEditor") numExprEditor: IgNumericEditorComponent; + @ViewChild("selectionEditor") selectionEditor: IgNumericEditorComponent; + + + constructor() { + this.data = Northwind.getData(); + this.filterColType = "number"; + this.currPageSize = 2; + + this.id ='grid1'; + + this.cols = [ + { key: "ProductID", headerText: "Product ID", width:"50px", dataType:"number" }, + { key: "ProductName", headerText: "Name", width:"250px", dataType:"string" }, + { key: "QuantityPerUnit", headerText: "Quantity per unit", width:"250px", dataType:"string" }, + { key: "UnitPrice", headerText: "Unit Price", width:"100px", dataType:"number" } + ]; + + this.filteringConditions = [{ cond: "equals", text: jQuery.ig.GridFiltering.locale.equalsLabel }, + { cond: "doesNotEqual", text: jQuery.ig.GridFiltering.locale.doesNotEqualLabel }, + { cond: "lessThan", text: jQuery.ig.GridFiltering.locale.lessThanLabel }, + { cond: "greaterThan", text: jQuery.ig.GridFiltering.locale.greaterThanLabel }]; + + this.pageSizes = [{value:2}, {value:5}, {value: 10},{value: 25}]; + this.pageIndexes = []; + for(var i = 0; i < Math.ceil(this.data.length/this.currPageSize) ; i++){ + this.pageIndexes.push({value: i+1}); + } + + } + columnSelChanged(evt) { + this.filterColType = evt.ui.items[0].data.dataType; + switch (this.filterColType) { + case "number": + this.filteringConditions = [{ cond: "equals", text: jQuery.ig.GridFiltering.locale.equalsLabel }, + { cond: "doesNotEqual", text: jQuery.ig.GridFiltering.locale.doesNotEqualLabel }, + { cond: "lessThan", text: jQuery.ig.GridFiltering.locale.lessThanLabel }, + { cond: "greaterThan", text: jQuery.ig.GridFiltering.locale.greaterThanLabel }]; + break; + case "string": + this.filteringConditions = [ + { cond: "startsWith", text: jQuery.ig.GridFiltering.locale.startsWithLabel }, + { cond: "endsWith", text: jQuery.ig.GridFiltering.locale.endsWithLabel }, + { cond: "contains", text: jQuery.ig.GridFiltering.locale.containsLabel }, + { cond: "doesNotContain", text: jQuery.ig.GridFiltering.locale.doesNotContainLabel }, + { cond: "empty", text: jQuery.ig.GridFiltering.locale.emptyNullText }, + { cond: "notEmpty", text: jQuery.ig.GridFiltering.locale.notEmptyNullText } + ]; + break; + case "date": + this.filteringConditions = [ + { cond: "on", text: jQuery.ig.GridFiltering.locale.onLabel }, + { cond: "notOn", text: jQuery.ig.GridFiltering.locale.notOnLabel }, + { cond: "before", text: jQuery.ig.GridFiltering.locale.beforeLabel }, + { cond: "after", text: jQuery.ig.GridFiltering.locale.afterLabel }, + { cond: "today", text: jQuery.ig.GridFiltering.locale.todayLabel }, + { cond: "yesterday", text: jQuery.ig.GridFiltering.locale.yesterdayLabel }, + { cond: "lastMonth", text: jQuery.ig.GridFiltering.locale.lastMonthLabel }, + { cond: "nextMonth", text: jQuery.ig.GridFiltering.locale.nextMonthLabel }, + { cond: "thisMonth", text: jQuery.ig.GridFiltering.locale.thisMonthLabel }, + { cond: "lastYear", text: jQuery.ig.GridFiltering.locale.lastYearLabel }, + { cond: "thisYear", text: jQuery.ig.GridFiltering.locale.thisYearLabel }, + { cond: "nextYear", text: jQuery.ig.GridFiltering.locale.nextYearLabel } + ]; + break; + } + + } + filter(){ + var colKey = this.columnsCombo.selectedItems()[0].data.key; + var colType = this.columnsCombo.selectedItems()[0].data.dataType; + + if(!this.condCombo.selectedItems() ){ + var fElem = this.condCombo.itemsFromIndex(0); + this.condCombo.select(fElem.element); + } + var condition = this.condCombo.value(); + + var expr; + switch (colType) { + case "string": + expr = this.strExprEditor.displayValue(); + break; + case "number": + expr = this.numExprEditor.value(); + break; + } + this.grid.featuresList.filtering.filter([{fieldName: colKey, expr: expr, cond: condition, logic: "AND"}],true); + this.reCalcPageIndexes(); + } + + pageIndexChanged(evt){ + var index = parseInt(evt.ui.items[0].data.value.toString()); + this.grid.featuresList.paging.pageIndex(index-1); + } + pageSizeChanged(evt){ + var size = parseInt(evt.ui.items[0].data.value.toString()); + this.grid.featuresList.paging.pageSize(size); + this.currPageSize = size; + //re-generate page indexes values + this.reCalcPageIndexes(); + } + + reCalcPageIndexes(){ + var indexes = []; + for(var i = 0; i < Math.ceil(this.grid.widget().data("igGrid").dataSource._filteredData.length/this.currPageSize) ; i++){ + indexes.push({value: i+1}); + } + this.pageIndexes = indexes; + } + + selectRow(){ + var selectIndex = this.selectionEditor.value(); + this.grid.featuresList.selection.selectRow(selectIndex); + } +} + +@NgModule({ + imports: [ BrowserModule, FormsModule ], + declarations: [ AppComponent, IgGridComponent, Column, Features, IgGridPagingFeature, IgGridSelectionFeature, + IgGridFilteringFeature, IgComboComponent, IgTextEditorComponent, IgNumericEditorComponent, IgDateEditorComponent ], + bootstrap: [ AppComponent ] +}) +export class AppModule {} + +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/samples/igGrid-callingMethods/igGrid-APIMethodsTemplate.html b/samples/igGrid-callingMethods/igGrid-APIMethodsTemplate.html new file mode 100644 index 0000000..c3062a3 --- /dev/null +++ b/samples/igGrid-callingMethods/igGrid-APIMethodsTemplate.html @@ -0,0 +1,56 @@ +
    +
    + + + + + + + + + + + + +
    + +
    + Filtering settings + + +
    + +
    +
    + +
    +
    + +
    +
    + +
    + + + +
    + Paging settings + + + + +
    +
    +
    + Selection settings + + +
    + +
    + +
    +
    +
    + +
    \ No newline at end of file diff --git a/samples/igGrid-callingMethods/igGrid-callingMethods.html b/samples/igGrid-callingMethods/igGrid-callingMethods.html new file mode 100644 index 0000000..040babb --- /dev/null +++ b/samples/igGrid-callingMethods/igGrid-callingMethods.html @@ -0,0 +1,104 @@ + + + + Angular 2 IgniteUI custom component + + + + + + + + + + + + +
    +

    igGrid

    + +
    +
    +

    This sample demonstrates how to call Angular components API methods.

    +

    Explore the Code

    +
    +
    + + Loading... + + +
    + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/igniteui.angular2.ts b/src/igniteui.angular2.ts index 724d12a..3a3482f 100644 --- a/src/igniteui.angular2.ts +++ b/src/igniteui.angular2.ts @@ -1156,6 +1156,7 @@ export class IgControlBase implements DoCheck { protected _config: any; protected _events: Map; protected _allowChangeDetection = true; + private _evtEmmiters : any = {}; set options(v: Model) { this._config = jQuery.extend(true, v, this._opts); @@ -1188,6 +1189,8 @@ export class IgControlBase implements DoCheck { for (var propt in jQuery.ui[this._widgetName].prototype.events) { this[propt] = new EventEmitter(); + //cahcing the event emmitters for cases when the event name is the same as a method name. + this._evtEmmiters[propt] = this[propt]; } } @@ -1220,7 +1223,8 @@ export class IgControlBase implements DoCheck { evtName = this._widgetName.toLowerCase() + propt.toLowerCase(); this._events[evtName] = propt; jQuery(this._el).on(evtName, function (evt, ui) { - that[that._events[evt.type]].emit({ event: evt, ui: ui }); + var emmiter = that._evtEmmiters[that._events[evt.type]]; + emmiter.emit({ event: evt, ui: ui }); }); } var propNames = Object.getOwnPropertyNames(jQuery.ui[this._widgetName].prototype); @@ -1851,6 +1855,13 @@ export class IgGridComponent extends IgGridBase { */ public totalRecordsCount(): number { return; } ; + /** + * Causes the grid to data bind to the data source (local or remote) , and re-render all of the data as well + * + * @param internal + */ + dataBind(internal: Object): void { return; }; + /** * Moves a visible column at a specified place, in front or behind a target column or at a target index * Note: This method is asynchronous which means that it returns immediately and any subsequent code will execute in parallel. This may lead to runtime errors. To avoid them put the subsequent code in the callback parameter provided by the method. From d08132eaeb5aeb62e36977626de8ebbb618fa8e4 Mon Sep 17 00:00:00 2001 From: Maya Date: Mon, 6 Feb 2017 18:57:41 +0200 Subject: [PATCH 5/5] Fixing issue with sample --- samples/igGrid-callingMethods/app.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/samples/igGrid-callingMethods/app.ts b/samples/igGrid-callingMethods/app.ts index 53ec502..c738382 100644 --- a/samples/igGrid-callingMethods/app.ts +++ b/samples/igGrid-callingMethods/app.ts @@ -101,7 +101,7 @@ export class AppComponent { if(!this.condCombo.selectedItems() ){ var fElem = this.condCombo.itemsFromIndex(0); - this.condCombo.select(fElem.element); + this.condCombo.select(fElem["element"]); } var condition = this.condCombo.value(); @@ -132,7 +132,7 @@ export class AppComponent { reCalcPageIndexes(){ var indexes = []; - for(var i = 0; i < Math.ceil(this.grid.widget().data("igGrid").dataSource._filteredData.length/this.currPageSize) ; i++){ + for(var i = 0; i < Math.ceil(this.grid.widget()["data"]("igGrid").dataSource._filteredData.length/this.currPageSize) ; i++){ indexes.push({value: i+1}); } this.pageIndexes = indexes;