Skip to content

Commit 07493dd

Browse files
MayaKirovaMayaKirova
committed
Initial commit for onPush for igGrid wrapper.
1 parent 81ee7e0 commit 07493dd

File tree

9 files changed

+5647
-155
lines changed

9 files changed

+5647
-155
lines changed

‎package-lock.json‎

Lines changed: 5419 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎samples/igGrid-TopLevelOpts/igGrid-TopLevelOptsTemplate.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
[height]='h'
99
[autoGenerateColumns]='false'
1010
[columns]='cols'
11+
[primaryKey]='"key"'
1112
></ig-grid>
1213
</div>
1314
</div>

‎samples/igGrid/app.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, NgModule } from '@angular/core';
1+
import { Component, NgModule,ViewChild } from '@angular/core';
22
import { IgGridComponent } from "../../src/igniteui.angular2";
33
import { FormsModule } from '@angular/forms';
44
import { Northwind } from "./../data/northwind";
@@ -16,6 +16,7 @@ export class AppComponent {
1616
private id: string;
1717
private data: any;
1818
private newProduct:any;
19+
@ViewChild("grid1") grid: IgGridComponent;
1920
//private deleteRecord: any;
2021

2122
constructor() {
@@ -26,7 +27,7 @@ export class AppComponent {
2627

2728
this.gridOptions = {
2829
autoCommit:true,
29-
dataSource: this.data,
30+
//dataSource: this.data,
3031
width: "100%",
3132
height: "400px",
3233
autoGenerateColumns: false,
@@ -69,6 +70,7 @@ export class AppComponent {
6970
addRecord() {
7071
this.data.push(this.newProduct);
7172
this.newProduct = this.createNewProduct();
73+
this.grid.markForCheck();
7274
};
7375

7476
deleteRecord(val) {
@@ -80,7 +82,12 @@ export class AppComponent {
8082
return item["ProductID"] === val;
8183
});
8284
this.data.splice(ind, 1);
85+
this.grid.markForCheck();
8386
};
87+
clickHandler(){
88+
this.gridOptions.width="80%";
89+
this.grid.markForCheck();
90+
}
8491
}
8592

8693
@NgModule({

‎samples/igGrid/igGridTemplate.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<div class="row">
22
<div class="col-md-8">
3-
<ig-grid [(options)]="gridOptions" [(widgetId)]='id'></ig-grid>
3+
<ig-grid [(options)]="gridOptions" [(widgetId)]='id' #grid1 [dataSource]='data'></ig-grid>
4+
<button (click)="clickHandler()">Apply Change</button>
45
</div>
56
<div class="col-md-4">
67
<h3>Add Product</h3>

‎src/igcontrolbase/igcontentcontrolbase.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { IgControlBase } from "./igcontrolbase";
2-
import { ElementRef, Renderer, IterableDiffers } from "@angular/core";
2+
import { ElementRef, Renderer, KeyValueDiffers } from "@angular/core";
33

44

55
export class IgContentControlBase<Model> extends IgControlBase<Model> {
66
private childNodes: Array<any>;
77

8-
constructor(el: ElementRef, renderer: Renderer, differs: IterableDiffers) {
8+
constructor(el: ElementRef, renderer: Renderer, differs: KeyValueDiffers) {
99
super(el, renderer, differs);
1010
this.childNodes = el.nativeElement.childNodes;
1111
}

‎src/igcontrolbase/igcontrolbase.ts‎

Lines changed: 104 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ElementRef, EventEmitter, Renderer, IterableDiffers, DoCheck } from '@angular/core';
1+
import { ElementRef, EventEmitter, Renderer, IterableDiffers, DoCheck, SimpleChanges, Input, ChangeDetectorRef, KeyValueDiffers } from '@angular/core';
22

33
declare var jQuery: any;
44

@@ -47,65 +47,53 @@ var NODES = {
4747
};
4848

4949
export class IgControlBase<Model> implements DoCheck {
50-
private _differs: any;
51-
protected _opts: any = {};
50+
@Input()
51+
public options:any = {};
52+
53+
protected _differs: any;
5254
protected _el: any;
5355
protected _widgetName: string;
5456
protected _differ: any;
55-
protected _config: any;
57+
protected _optsDiffer: any;
5658
protected _events: Map<string, string>;
5759
protected _allowChangeDetection = true;
5860
private _evtEmmiters : any = {};
5961
private _changeDetectionInterval: any;
6062
private _nativeElement:any;
6163

62-
set options(v: Model) {
63-
if (this._config !== undefined && this._config !== null) {
64-
//if the options are alrealy set recreate the component
65-
jQuery(this._el)[this._widgetName]("destroy");
66-
this._config = jQuery.extend(false, this._config, v);
67-
jQuery(this._el)[this._widgetName](this._config);
68-
} else {
69-
this._config = jQuery.extend(true, v, this._opts);
70-
if (this._opts.dataSource) {
71-
// _config.dataSource should reference the data if the data is set as a top-level opts
72-
// to allow two-way data binding
73-
this._config.dataSource = this._opts.dataSource;
74-
}
75-
this._differ = this._differs.find([]).create(null);
76-
}
77-
this._opts = jQuery.extend(true, {}, this._config);
78-
if (this._opts.dataSource) {
79-
delete this._opts.dataSource;
80-
}
81-
};
64+
// set options(v: Model) {
65+
// if (this._config !== undefined && this._config !== null) {
66+
// //if the options are alrealy set recreate the component
67+
// jQuery(this._el)[this._widgetName]("destroy");
68+
// this._config = jQuery.extend(false, this._config, v);
69+
// jQuery(this._el)[this._widgetName](this._config);
70+
// } else {
71+
// this._config = jQuery.extend(true, v, this._opts);
72+
// if (this._opts.dataSource) {
73+
// // _config.dataSource should reference the data if the data is set as a top-level opts
74+
// // to allow two-way data binding
75+
// this._config.dataSource = this._opts.dataSource;
76+
// }
77+
// this._differ = this._differs.find([]).create(null);
78+
// }
79+
// this._opts = jQuery.extend(true, {}, this._config);
80+
// if (this._opts.dataSource) {
81+
// delete this._opts.dataSource;
82+
// }
83+
// };
8284
public widgetId: string;
8385
public changeDetectionInterval: number;
8486

85-
constructor(el: ElementRef, renderer: Renderer, differs: IterableDiffers) {
87+
constructor(el: ElementRef, renderer: Renderer, differs: IterableDiffers, public kvalDiffers: KeyValueDiffers, public cdr: ChangeDetectorRef) {
8688
this._differs = differs;
8789
this._nativeElement = el.nativeElement;
8890
this._widgetName = this.convertToCamelCase(el.nativeElement.nodeName.toLowerCase());//ig-grid -> igGrid
8991
this._el = el.nativeElement.appendChild(document.createElement(NODES[el.nativeElement.nodeName.toLowerCase()]));
90-
91-
for (var opt in jQuery.ui[this._widgetName].prototype.options) {
92-
Object.defineProperty(this, opt, {
93-
set: this.createSetter(opt),
94-
enumerable: true,
95-
configurable: true
96-
});
97-
}
98-
99-
for (var propt in jQuery.ui[this._widgetName].prototype.events) {
100-
this[propt] = new EventEmitter();
101-
//cahcing the event emmitters for cases when the event name is the same as a method name.
102-
this._evtEmmiters[propt] = this[propt];
103-
}
10492
}
10593

10694
createSetter(name) {
10795
return function (value) {
108-
this._opts[name] = value;
96+
this.options[name] = value;
10997
if (this._config) {
11098
this._config[name] = value;
11199
}
@@ -114,9 +102,9 @@ export class IgControlBase<Model> implements DoCheck {
114102
jQuery.ui[this._widgetName].prototype.options.hasOwnProperty(name) &&
115103
jQuery(this._el).data(this._widgetName)) {
116104
jQuery(this._el)[this._widgetName]("option", name, value);
117-
if(name === "dataSource" && typeof this.createDataSource === 'function') {
118-
this._dataSource = this.createDataSource(value);
119-
}
105+
// if(name === "dataSource" && typeof this.createDataSource === 'function') {
106+
// this._dataSource = this.createDataSource(value);
107+
// }
120108
}
121109
}
122110
}
@@ -127,6 +115,26 @@ export class IgControlBase<Model> implements DoCheck {
127115

128116
//events binding
129117
let that = this;
118+
119+
for (var opt in jQuery.ui[this._widgetName].prototype.options) {
120+
//copy root level options into this.options
121+
if(this[opt]){
122+
this.options[opt] = this[opt];
123+
}
124+
if(opt !== "dataSource") {
125+
Object.defineProperty(this, opt, {
126+
set: this.createSetter(opt),
127+
enumerable: true,
128+
configurable: true
129+
});
130+
}
131+
}
132+
133+
for (var propt in jQuery.ui[this._widgetName].prototype.events) {
134+
this[propt] = new EventEmitter();
135+
//cahcing the event emmitters for cases when the event name is the same as a method name.
136+
this._evtEmmiters[propt] = this[propt];
137+
}
130138

131139
for (var propt in jQuery.ui[this._widgetName].prototype.events) {
132140
evtName = this._widgetName.toLowerCase() + propt.toLowerCase();
@@ -157,12 +165,12 @@ export class IgControlBase<Model> implements DoCheck {
157165
}, this.changeDetectionInterval);
158166

159167
jQuery(this._el).attr("id", this.widgetId);
160-
if (this._config === null || this._config === undefined) {
161-
//if there is no config specified in the component template use the defined top-level options for a configuration
162-
//by invoking the setter of options property
163-
this.options = this._opts;
164-
}
165-
jQuery(this._el)[this._widgetName](this._config);
168+
// if (this._config === null || this._config === undefined) {
169+
// //if there is no config specified in the component template use the defined top-level options for a configuration
170+
// //by invoking the setter of options property
171+
// this.options = this._opts;
172+
// }
173+
jQuery(this._el)[this._widgetName](this.options);
166174
}
167175
createMethodGetter(name) {
168176
return function () {
@@ -172,35 +180,58 @@ export class IgControlBase<Model> implements DoCheck {
172180
}
173181

174182
ngDoCheck() {
175-
if (this._allowChangeDetection) {
176-
this._allowChangeDetection = false;
177-
this.optionChange();
183+
if (this._differ) {
184+
const changes = this._differ.diff(this.options);
185+
if (changes) {
186+
this.optionChange(changes);
187+
}
188+
}
189+
// if (this._allowChangeDetection) {
190+
// this._allowChangeDetection = false;
191+
// this.optionChange();
192+
// }
193+
}
194+
public ngOnChanges(changes: SimpleChanges): void {
195+
const opts = "options";
196+
if (opts in changes) {
197+
const value = changes[opts].currentValue;
198+
if (!this.kvalDiffers && value) {
199+
try {
200+
this._differ = this.kvalDiffers.find({}).create();
201+
} catch (e) {
202+
throw new Error("Only binding to object is supported.");
203+
}
204+
}
178205
}
179206
}
180207

181208
optionChange(options?) {
182-
if (this._differ != null) {
183-
var diff = [];
184-
var element = jQuery(this._el);
185-
var i, j, valKey = this._config.valueKey, option;
186-
var opts = options || jQuery.extend(true, {}, this._config);
187-
if (opts.dataSource) {
188-
delete opts.dataSource;
189-
}
209+
debugger;
210+
// if (this._differ != null) {
211+
// var diff = [];
212+
// var element = jQuery(this._el);
213+
// var i, j, valKey = this._config.valueKey, option;
214+
// var opts = options || jQuery.extend(true, {}, this._config);
215+
// if (opts.dataSource) {
216+
// delete opts.dataSource;
217+
// }
190218

191-
if (!this.equalsDiff(opts, this._opts, diff)) {
192-
this._opts = jQuery.extend(true, {}, opts);
193-
for (i = 0; i < diff.length; i++) {
194-
option = diff[i].key;
195-
if (jQuery.ui[this._widgetName] &&
196-
jQuery.ui[this._widgetName].prototype.options &&
197-
jQuery.ui[this._widgetName].prototype.options.hasOwnProperty(option) &&
198-
jQuery(this._el).data(this._widgetName)) {
199-
jQuery(this._el)[this._widgetName]("option", option, diff[i].newVal);
200-
}
201-
}
202-
}
203-
}
219+
// if (!this.equalsDiff(opts, this._opts, diff)) {
220+
// this._opts = jQuery.extend(true, {}, opts);
221+
// for (i = 0; i < diff.length; i++) {
222+
// option = diff[i].key;
223+
// if (jQuery.ui[this._widgetName] &&
224+
// jQuery.ui[this._widgetName].prototype.options &&
225+
// jQuery.ui[this._widgetName].prototype.options.hasOwnProperty(option) &&
226+
// jQuery(this._el).data(this._widgetName)) {
227+
// jQuery(this._el)[this._widgetName]("option", option, diff[i].newVal);
228+
// }
229+
// }
230+
// }
231+
// }
232+
}
233+
public markForCheck(){
234+
this.cdr.detectChanges();
204235
}
205236

206237
// Interrogation functions

‎src/iggrid/iggrid.component.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
import { Component, ElementRef, Renderer, IterableDiffers } from '@angular/core';
1+
import { Component, ElementRef, Renderer, KeyValueDiffers, IterableDiffers, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
22
import { IgGridBase } from './iggridbase';
33

44
@Component({
5+
changeDetection: ChangeDetectionStrategy.OnPush,
56
"selector": "ig-grid",
67
template: "<ng-content></ng-content>",
78
inputs: ["widgetId", "options", "changeDetectionInterval","disabled","create","width","height","autoAdjustHeight","avgRowHeight","avgColumnWidth","defaultColumnWidth","autoGenerateColumns","virtualization","virtualizationMode","requiresDataBinding","rowVirtualization","columnVirtualization","virtualizationMouseWheelStep","adjustVirtualHeights","templatingEngine","columns","dataSource","dataSourceUrl","dataSourceType","responseDataKey","responseTotalRecCountKey","requestType","responseContentType","showHeader","showFooter","fixedHeaders","fixedFooters","caption","features","tabIndex","localSchemaTransform","primaryKey","serializeTransactionLog","autoCommit","aggregateTransactions","autoFormat","renderCheckboxes","updateUrl","restSettings","alternateRowStyles","autofitLastColumn","enableHoverStyles","enableUTCDates","mergeUnboundColumns","jsonpRequest","enableResizeContainerCheck","featureChooserIconDisplay","scrollSettings"],
89
outputs: ["cellClick","cellRightClick","dataBinding","dataBound","rendering","rendered","dataRendering","dataRendered","headerRendering","headerRendered","footerRendering","footerRendered","headerCellRendered","rowsRendering","rowsRendered","schemaGenerated","columnsCollectionModified","requestError","created","destroyed"]
910
})
1011
export class IgGridComponent extends IgGridBase<IgGrid> {
11-
constructor(el: ElementRef, renderer: Renderer, differs: IterableDiffers) { super(el, renderer, differs); }
12+
constructor(el: ElementRef, renderer: Renderer, differs: IterableDiffers, kvalDiff: KeyValueDiffers, cdr: ChangeDetectorRef) { super(el, renderer, differs, kvalDiff, cdr); }
1213

1314
/**
1415
* Returns the element holding the data records

0 commit comments

Comments
 (0)