Skip to content

Adding sample with calling API methods & fixing issue when api and event name are the same #132

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Feb 7, 2017
Merged

Adding sample with calling API methods & fixing issue when api and event name are the same #132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bcf2f01
Adding test for calling methods via component in Grid
MayaKirova Feb 3, 2017
6e03260
Fixing test
MayaKirova Feb 3, 2017
d6c6112
Fixing test
MayaKirova Feb 3, 2017
4dc5470
Adding sample with calling API methods & fixing issue when api and event
MayaKirova Feb 6, 2017
d08132e
Fixing issue with sample
MayaKirova Feb 6, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,7 @@ <h2>Samples</h2>
<li><a href="samples/igGrid-TopLevelOpts/igGrid-TopLevelOpts.html">Top-level template options</a></li>
<li><a href="samples/igGrid-ComplexOpts/igGrid-ComplexOpts.html">Complex template options</a></li>
<li><a href="samples/igGrid-HTTPClient/igGrid-HTTPClient.html">Grid with HTTP client</a></li>
<li><a href="samples/igGrid-callingMethods/igGrid-callingMethods.html">Calling API methods</a></li>
</ul>
</div>
<a class="btn btn-default" href="samples/igHierarchicalGrid/igHierarchicalGrid.html">igHierarchicalGrid</a>
Expand Down
155 changes: 155 additions & 0 deletions samples/igGrid-callingMethods/app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<any>;
private id: string;
private data: any;
private pKey: string;
private filteringConditions:Array<any>;
private pageSizes:Array<any>;
private pageIndexes:Array<any>;
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);
56 changes: 56 additions & 0 deletions samples/igGrid-callingMethods/igGrid-APIMethodsTemplate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<div class="row">
<div class="col-md-12">
<ig-grid [widgetId]='id' [width]='w' [autoCommit]='true' [dataSource]='data' [height]='h' [autoGenerateColumns]='false' [primaryKey]='"ProductID"' #grid>
<column [key]="'ProductID'" [headerText]="'Product ID'" [width]="'165px'" [dataType]="'number'"></column>
<column [key]="'ProductName'" [headerText]="'Product Name'" [width]="'250px'" [dataType]="'string'"></column>
<column [key]="'QuantityPerUnit'" [headerText]="'Quantity per unit'" [width]="'250px'" [dataType]="'string'"></column>
<column [key]="'UnitPrice'" [headerText]="'Unit Price'" [width]="'100px'" [dataType]="'number'"></column>
<features>
<paging [pageSize]="currPageSize"></paging>
<filtering></filtering>
<selection></selection>
</features>
</ig-grid>

<div>

<fieldset class="explorer">
<legend>Filtering settings</legend>
<ig-combo widgetId='columnsCombo' width='140px' [(dataSource)]='cols' textKey='headerText' valueKey='key' mode='dropdown' (selectionChanged)="columnSelChanged($event)" #columnsCombo></ig-combo>
<ig-combo widgetId='columnsConditionsCombo' width='140px' [dataSource]='filteringConditions' textKey='text' valueKey='cond' mode='dropdown' #condCombo></ig-combo>
<div *ngIf="(filterColType == 'string')" style='display:inline-block;'>
<ig-text-editor widgetId='stringExprEditor' width='140px' #exprEditor></ig-text-editor>
</div>
<div *ngIf="(filterColType == 'number')" style='display:inline-block;'>
<ig-numeric-editor widgetId='numberExprEditor' width='140px' #exprEditor></ig-numeric-editor>
</div>
<div *ngIf="(filterColType == 'date')" style='display:inline-block;'>
<ig-date-editor widgetId='dateExprEditor' width='140px' #exprEditor></ig-date-editor>
</div>
<br />
<input type="button" id="buttonFilter" value="Filter" (click)="filter()" />
</fieldset>



<fieldset class="explorer">
<legend>Paging settings</legend>
<label for="pageIndexList">Select Page Index:</label>
<ig-combo widgetId='pageIndexCombo' width='100px' [dataSource]='pageIndexes' valueKey='value' mode='dropdown' (selectionChanged)="pageIndexChanged($event)"></ig-combo>
<label for="PageSizeSelect">Select Page Size:</label>
<ig-combo widgetId='pageSizeCombo' width='100px' [dataSource]='pageSizes' mode='dropdown' valueKey='value' (selectionChanged)="pageSizeChanged($event)"></ig-combo>
</fieldset>
<div style="clear:both;"></div>
<fieldset class="explorer">
<legend>Selection settings</legend>
<label for="RowSelect">Select Row Index: </label>
<ig-numeric-editor widgetId='rowNumberEditor' width='140px' #selectionEditor></ig-numeric-editor>
<br />
<input type="button" id="buttonSelectRow" value="Select Row" (click)="selectRow()"/>
</fieldset>

<div style="clear:both;"></div>
</div>
</div>

</div>
104 changes: 104 additions & 0 deletions samples/igGrid-callingMethods/igGrid-callingMethods.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 IgniteUI custom component</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" type="text/css" />
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../sample.css" />
<style>
fieldset.explorer {
float: left;
width: 45%;
}
fieldset {
border: none;
margin: 1em;
}
fieldset legend {
color: #5F6564;
font-family: 'Open Sans',sans-serif;
font-size: 16px;
font-weight: 300;
}

fieldset label {
display: block;
margin: 0.5em 0;
font-size: 12px;
color: #666;
}
</style>
</head>
<body class="container">

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Ignite UI Angular 2 components </a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/igniteui-angular2/index.html">Home</a></li>
<li><a href="https://github.com/IgniteUI/igniteui-angular2">View on GitHub <i class="fa fa-github"></i></a></li>
</ul>
</div>
</div>
</div>
<div>
<h1 class="push-down-md"><a href="http://igniteui.com/grid/overview" target="_blank">igGrid</a></h1>

<div class="row description">
<div class="col-md-12">
<p class="lead">This sample demonstrates how to call Angular components API methods.</p>
<p><a href="https://github.com/IgniteUI/igniteui-angular2/blob/master/samples/igGrid/igGrid.html" class="btn btn-default btn-lg btn-primary" target="_blank"><i class="fa fa-code fa-lg"></i> Explore the Code</a></p>
</div>
</div>

<my-app>Loading...</my-app>


</div>
<footer>
<p>
<a href="/igniteui-angular2/index.html">Home</a> |
<a href="https://github.com/IgniteUI/igniteui-angular2/issues">Feedback &amp; Questions</a> |
<a href="https://github.com/IgniteUI/igniteui-angular2">Clone &amp; Fork</a>
</p>
<p class="small">For more information or to download a trial of Ignite UI, please visit: <a href="http://www.igniteui.com">http://www.igniteui.com</a></p>
</footer>

<!-- 1. Load libraries -->
<script src="http://code.jquery.com/jquery-1.12.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

<script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
<script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
<script src="./../../systemjs.config.js"></script>
<!-- Ignite UI Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
System.import('app.ts')
.then(null, console.error.bind(console));
</script>
</body>
</html>
13 changes: 12 additions & 1 deletion src/igniteui.angular2.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1156,6 +1156,7 @@ export class IgControlBase<Model> implements DoCheck {
protected _config: any;
protected _events: Map<string, string>;
protected _allowChangeDetection = true;
private _evtEmmiters : any = {};

set options(v: Model) {
this._config = jQuery.extend(true, v, this._opts);
Expand Down Expand Up @@ -1188,6 +1189,8 @@ export class IgControlBase<Model> 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];
}
}

Expand Down Expand Up @@ -1220,7 +1223,8 @@ export class IgControlBase<Model> 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);
Expand Down Expand Up @@ -1851,6 +1855,13 @@ export class IgGridComponent extends IgGridBase<IgGrid> {
*/
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.
Expand Down
Loading