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..c738382 --- /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. diff --git a/tests/unit/iggrid/grid.spec.ts b/tests/unit/iggrid/grid.spec.ts index e41d8d1..2fa1b2a 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); + var cell = fixture.componentInstance.viewChild.cellAt(1, 0, false); + expect(cell.innerHTML).toBe("Mary Johnson"); + + done(); + + }); + + + }) + it('should allow filtering after new data is applied', (done) => { var template = '
    '; TestBed.overrideComponent(TestComponent, {