Skip to content

Commit 26b7c74

Browse files
kdinevkdinev
authored
Merge pull request #266 from IgniteUI/dkamburov/fix-binding-issues
Resolving binding issues
2 parents f541588 + 57d703d commit 26b7c74

File tree

8 files changed

+1532
-6876
lines changed

8 files changed

+1532
-6876
lines changed

‎package-lock.json‎

Lines changed: 0 additions & 5419 deletions
This file was deleted.

‎src/igcombo/igcombo.component.ts‎

Lines changed: 167 additions & 163 deletions
Large diffs are not rendered by default.

‎src/iggrid/iggridbase.ts‎

Lines changed: 158 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,172 +1,182 @@
1-
import {IgControlBase} from '../igcontrolbase/igcontrolbase';
2-
import {AfterContentInit, QueryList, ContentChild, ContentChildren, ElementRef, Renderer, KeyValueDiffers, IterableDiffers, SimpleChanges, Input, ChangeDetectorRef} from '@angular/core';
1+
import { IgControlBase } from '../igcontrolbase/igcontrolbase';
2+
import { AfterContentInit, QueryList, ContentChild, ContentChildren, ElementRef, Renderer, KeyValueDiffers, IterableDiffers, SimpleChanges, Input, ChangeDetectorRef } from '@angular/core';
33
import { Column } from './column.directive';
44
import { Features } from './features.directive';
55

6-
export class IgGridBase<Model> extends IgControlBase<Model> implements AfterContentInit {
7-
@Input()
8-
public dataSource;
9-
protected _changes: any;
10-
@ContentChildren(Column) _columns: QueryList<Column>;
11-
@ContentChild(Features) featuresList: Features;
6+
export class IgGridBase<Model> extends IgControlBase<Model> implements AfterContentInit {
7+
@Input()
8+
public set dataSource(value: any) {
9+
this._dataSource = value;
10+
const grid = jQuery(this._el).data(this._widgetName);
11+
if (grid) {
12+
jQuery(this._el)[this._widgetName]("option", "dataSource", this._dataSource);
13+
}
14+
};
15+
protected _changes: any;
16+
@ContentChildren(Column) _columns: QueryList<Column>;
17+
@ContentChild(Features) featuresList: Features;
18+
private _dataSource;
1219

13-
constructor(el: ElementRef, renderer: Renderer, differs: IterableDiffers, kvalDiffers: KeyValueDiffers, cdr: ChangeDetectorRef) { super(el, renderer, differs, kvalDiffers, cdr); }
20+
constructor(el: ElementRef, renderer: Renderer, differs: IterableDiffers, kvalDiffers: KeyValueDiffers, cdr: ChangeDetectorRef) { super(el, renderer, differs, kvalDiffers, cdr); }
1421

15-
ngOnInit() {
16-
if(this.dataSource === null || this.dataSource === undefined){
17-
this.dataSource = this.options["dataSource"];
18-
}
19-
}
20-
ngAfterContentInit() {
21-
if (this._columns && this._columns.length) {
22-
if (this.options) {
23-
this.options["columns"] = this._columns.map((c) => c._settings);
24-
}
25-
}
26-
if (this.featuresList){
27-
if (this.options) {
28-
this.options["features"] = this.featuresList.allFeatures.map((c) => { return c.initSettings;} );
29-
}
30-
}
31-
if(this.options && this.options["features"] && !this.featuresList){
32-
this.featuresList = new Features();
33-
//populate featuresList
34-
for(var i=0; i < this.options["features"].length; i++){
35-
var featureName = this.options["features"][i].name.charAt(0).toLowerCase() + this.options["features"][i].name.slice(1);
36-
this.featuresList.addFeature(featureName, this._el);
37-
}
38-
}
39-
super.ngOnInit();
40-
}
22+
ngOnInit() {
23+
if (this._dataSource === null || this._dataSource === undefined) {
24+
this._dataSource = this.options["dataSource"];
25+
}
26+
if (!this.options["dataSource"] && this._dataSource) {
27+
this.options["dataSource"] = this._dataSource;
28+
}
29+
}
30+
ngAfterContentInit() {
31+
if (this._columns && this._columns.length) {
32+
if (this.options) {
33+
this.options["columns"] = this._columns.map((c) => c._settings);
34+
}
35+
}
36+
if (this.featuresList) {
37+
if (this.options) {
38+
this.options["features"] = this.featuresList.allFeatures.map((c) => { return c.initSettings; });
39+
}
40+
}
41+
if (this.options && this.options["features"] && !this.featuresList) {
42+
this.featuresList = new Features();
43+
//populate featuresList
44+
for (var i = 0; i < this.options["features"].length; i++) {
45+
var featureName = this.options["features"][i].name.charAt(0).toLowerCase() + this.options["features"][i].name.slice(1);
46+
this.featuresList.addFeature(featureName, this._el);
47+
}
48+
}
49+
super.ngOnInit();
50+
}
4151

42-
createDataSource(value: any) {
43-
return jQuery.extend(true, [], value);
44-
}
52+
createDataSource(value: any) {
53+
return jQuery.extend(true, [], value);
54+
}
4555

46-
deleteRow(id, index) {
47-
var element = jQuery(this._el),
48-
tr = element.find("tr[data-id='" + id + "']");
56+
deleteRow(id, index) {
57+
var element = jQuery(this._el),
58+
tr = element.find("tr[data-id='" + id + "']");
4959

50-
if (tr.length > 0) {
51-
tr.remove();
52-
jQuery(this._el).data(this._widgetName).dataSource.deleteRow(id, true);
53-
jQuery(this._el).data(this._widgetName).dataSource._removeTransactionsByRecordId(id);
54-
}
55-
this._changes.splice(index, 1);
56-
}
60+
if (tr.length > 0) {
61+
tr.remove();
62+
jQuery(this._el).data(this._widgetName).dataSource.deleteRow(id, true);
63+
jQuery(this._el).data(this._widgetName).dataSource._removeTransactionsByRecordId(id);
64+
}
65+
this._changes.splice(index, 1);
66+
}
5767

58-
addRow(rowData, index) {
59-
var grid, pkKey = this["primaryKey"] || this.options["primaryKey"],
60-
existingDomRow = jQuery(this._el).find("tr[data-id='" + rowData[pkKey] + "']"),
61-
widgetName = this._widgetName, existingRow, t;
68+
addRow(rowData, index) {
69+
var grid, pkKey = this["primaryKey"] || this.options["primaryKey"],
70+
existingDomRow = jQuery(this._el).find("tr[data-id='" + rowData[pkKey] + "']"),
71+
widgetName = this._widgetName, existingRow, t;
6272

63-
if (this._widgetName === "igHierarchicalGrid") {
64-
widgetName = "igGrid";
65-
}
73+
if (this._widgetName === "igHierarchicalGrid") {
74+
widgetName = "igGrid";
75+
}
6676

67-
grid = jQuery(this._el).data(widgetName);
77+
grid = jQuery(this._el).data(widgetName);
6878

69-
if (existingDomRow.length === 0) {
70-
grid.renderNewRow(rowData, rowData[pkKey]);
71-
}
79+
if (existingDomRow.length === 0) {
80+
grid.renderNewRow(rowData, rowData[pkKey]);
81+
}
7282

73-
existingRow = grid.dataSource.findRecordByKey(rowData[pkKey]);
74-
if (!existingRow) {
75-
// add the row without affecting the original DS (scope source)
76-
// TODO: trigger rowAdded event?
77-
grid.dataSource._addRow(rowData, index);
78-
//add transaction
79-
t = grid.dataSource._createNewRowTransaction(rowData[pkKey], rowData);
80-
grid.dataSource._addTransaction(t);
81-
grid.dataSource._removeTransactionByTransactionId(t.tid);
82-
}
83-
this._changes.push(this.kvalDiffers.find({}).create());
84-
}
85-
updateRow(rec, currValue, key) {
86-
const pkKey = this["primaryKey"] || this.options["primaryKey"];
87-
let widgetName = this._widgetName;
88-
if (this._widgetName === "igHierarchicalGrid") {
89-
widgetName = "igGrid";
90-
}
91-
const element = jQuery(this._el);
92-
const grid = element.data(widgetName);
93-
const tr = element.find("tr[data-id='" + rec[pkKey] + "']");
94-
const column = grid.columnByKey(key);
95-
let newFormattedVal;
96-
let td;
97-
if (column) {
98-
if (column.template) {
99-
newFormattedVal = grid._renderTemplatedCell(rec, column);
100-
} else {
101-
newFormattedVal = grid._renderCell(currValue, column, rec);
102-
}
103-
td = grid._getCellsByColKey(element.find("tr[data-id='" + rec[pkKey] + "']"), key);
104-
//if current cell is still in edit mode, exit it.
105-
if (jQuery(td).find("input.ui-igedit-input").length > 0){
106-
element.data("igGridUpdating").endEdit();
107-
}
108-
jQuery(td).html(newFormattedVal);
109-
if (grid.options.localSchemaTransform) {
110-
rec = grid.dataSource.schema().transform([rec])[0];
111-
}
112-
113-
grid.dataSource.updateRow(rec[pkKey], rec);
114-
grid.dataSource._commitTransactionsByRowId(rec[pkKey]);
115-
}
116-
}
83+
existingRow = grid.dataSource.findRecordByKey(rowData[pkKey]);
84+
if (!existingRow) {
85+
// add the row without affecting the original DS (scope source)
86+
// TODO: trigger rowAdded event?
87+
grid.dataSource._addRow(rowData, index);
88+
//add transaction
89+
t = grid.dataSource._createNewRowTransaction(rowData[pkKey], rowData);
90+
grid.dataSource._addTransaction(t);
91+
grid.dataSource._removeTransactionByTransactionId(t.tid);
92+
}
93+
this._changes.push(this.kvalDiffers.find({}).create());
94+
}
95+
updateRow(rec, currValue, key) {
96+
const pkKey = this["primaryKey"] || this.options["primaryKey"];
97+
let widgetName = this._widgetName;
98+
if (this._widgetName === "igHierarchicalGrid") {
99+
widgetName = "igGrid";
100+
}
101+
const element = jQuery(this._el);
102+
const grid = element.data(widgetName);
103+
const tr = element.find("tr[data-id='" + rec[pkKey] + "']");
104+
const column = grid.columnByKey(key);
105+
let newFormattedVal;
106+
let td;
107+
if (column) {
108+
if (column.template) {
109+
newFormattedVal = grid._renderTemplatedCell(rec, column);
110+
} else {
111+
newFormattedVal = grid._renderCell(currValue, column, rec);
112+
}
113+
td = grid._getCellsByColKey(element.find("tr[data-id='" + rec[pkKey] + "']"), key);
114+
//if current cell is still in edit mode, exit it.
115+
if (jQuery(td).find("input.ui-igedit-input").length > 0) {
116+
element.data("igGridUpdating").endEdit();
117+
}
118+
jQuery(td).html(newFormattedVal);
119+
if (grid.options.localSchemaTransform) {
120+
rec = grid.dataSource.schema().transform([rec])[0];
121+
}
122+
123+
grid.dataSource.updateRow(rec[pkKey], rec);
124+
grid.dataSource._commitTransactionsByRowId(rec[pkKey]);
125+
}
126+
}
117127

118-
public ngOnChanges(changes: SimpleChanges): void {
119-
const ds = "dataSource";
128+
public ngOnChanges(changes: SimpleChanges): void {
129+
const ds = "dataSource";
120130
if (ds in changes) {
121-
const value = changes[ds].currentValue;
122-
if (value) {
131+
const value = changes[ds].currentValue;
132+
if (value) {
123133
try {
124134
this._differ = this._differs.find(value).create();
125-
this._changes = [];
126-
for(var i=0; i < this.dataSource.length; i++){
127-
this._changes.push(this.kvalDiffers.find({}).create());
128-
}
135+
this._changes = [];
136+
for (var i = 0; i < this._dataSource.length; i++) {
137+
this._changes.push(this.kvalDiffers.find({}).create());
138+
}
129139
}
130-
catch(e){
131-
throw new Error("Only binding to arrays is supported.");
132-
}
133-
}
134-
}
135-
super.ngOnChanges(changes);
136-
}
137-
ngDoCheck() {
138-
if (this._differ) {
139-
const changes = this._differ.diff(this.dataSource);
140-
//check if grid is initialized
141-
const grid = jQuery(this._el).data(this._widgetName);
140+
catch (e) {
141+
throw new Error("Only binding to arrays is supported.");
142+
}
143+
}
144+
}
145+
super.ngOnChanges(changes);
146+
}
147+
ngDoCheck() {
148+
if (this._differ) {
149+
const changes = this._differ.diff(this._dataSource);
150+
//check if grid is initialized
151+
const grid = jQuery(this._el).data(this._widgetName);
142152
if (changes && grid) {
143153
this.dataSourceApplyChanges(changes);
144154
}
145-
if(changes && changes.isDirty && grid) {
146-
//data source has been changed post initialization.
147-
jQuery(this._el)[this._widgetName]("option", "dataSource", this.dataSource);
148-
}
149-
if(this._changes && grid){
150-
const pkKey = this["primaryKey"] || this.options["primaryKey"];
151-
//check recs
152-
for(var i = 0; i < this.dataSource.length; i++){
153-
var item = this.dataSource[i];
154-
var rowChanges = this._changes[i].diff(item);
155-
if(rowChanges){
156-
rowChanges.forEachChangedItem((change: any) => {
157-
this.updateRow(item, change.currentValue, change.key);
158-
});
159-
}
160-
}
161-
}
155+
if (changes && changes.isDirty && grid) {
156+
//data source has been changed post initialization.
157+
jQuery(this._el)[this._widgetName]("option", "dataSource", this._dataSource);
158+
}
159+
if (this._changes && grid) {
160+
const pkKey = this["primaryKey"] || this.options["primaryKey"];
161+
//check recs
162+
for (var i = 0; i < this._dataSource.length; i++) {
163+
var item = this._dataSource[i];
164+
var rowChanges = this._changes[i].diff(item);
165+
if (rowChanges) {
166+
rowChanges.forEachChangedItem((change: any) => {
167+
this.updateRow(item, change.currentValue, change.key);
168+
});
169+
}
170+
}
171+
}
162172
}
163-
super.ngDoCheck();
164-
}
165-
public dataSourceApplyChanges(changes) {
166-
const pkKey = this["primaryKey"] || this.options["primaryKey"];
167-
changes.forEachAddedItem(r => this.addRow(r.item, r.currentIndex));
168-
changes.forEachRemovedItem(r => {this.deleteRow(r.item[pkKey], r.previousIndex);});
169-
}
173+
super.ngDoCheck();
174+
}
175+
public dataSourceApplyChanges(changes) {
176+
const pkKey = this["primaryKey"] || this.options["primaryKey"];
177+
changes.forEachAddedItem(r => this.addRow(r.item, r.currentIndex));
178+
changes.forEachRemovedItem(r => { this.deleteRow(r.item[pkKey], r.previousIndex); });
179+
}
170180

171-
allRows() { };
181+
allRows() { };
172182
}

0 commit comments

Comments
 (0)