Skip to content

Commit 5b87976

Browse files
kdinevkdinev
authored
Merge pull request #225 from MayaKirova/fix-issue-193
Fix for issue 193
2 parents ed8dcd9 + f4761b1 commit 5b87976

File tree

6 files changed

+157
-17
lines changed

6 files changed

+157
-17
lines changed

‎src/iggrid/iggridbase.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -87,12 +87,10 @@ export class IgGridBase<Model> extends IgControlBase<Model> implements AfterCont
8787
}
8888
//check for changes in collection
8989
this._changes = this._differ.diff(this._config.dataSource);
90-
if (this._config.dataSource.length !== this._dataSource.length) {
90+
if (this._changes && grid) {
9191
this._dataSource = jQuery.extend(true, [], this._config.dataSource);
92-
if (this._changes) {
93-
this._changes.forEachAddedItem(r => this.addRow(r.item, r.currentIndex));
94-
this._changes.forEachRemovedItem(r => this.deleteRow(r.item[pkKey]))
95-
}
92+
this._changes.forEachAddedItem(r => this.addRow(r.item, r.currentIndex));
93+
this._changes.forEachRemovedItem(r => this.deleteRow(r.item[pkKey]));
9694
}
9795
//check for changes in values
9896
if (!this.equalsDiff(this._config.dataSource, this._dataSource, diff)) {

‎src/ighierarchicalgrid/ighierarchicalgrid.component.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,10 @@ export class IgHierarchicalGridComponent extends IgGridBase<IgHierarchicalGrid>
3737

3838
//check for changes in collection
3939
this._changes = this._differ.diff(this._config.dataSource);
40-
if (this._config.dataSource.length !== this._dataSource.length) {
40+
if (this._changes && mainGrid) {
4141
this._dataSource = jQuery.extend(true, [], this._config.dataSource);
42-
if (this._changes) {
43-
this._changes.forEachAddedItem(r => this.addRow(r.item, r.currentIndex));
44-
this._changes.forEachRemovedItem(r => this.deleteRow(r.item[pkKey]))
45-
}
42+
this._changes.forEachAddedItem(r => this.addRow(r.item, r.currentIndex));
43+
this._changes.forEachRemovedItem(r => this.deleteRow(r.item[pkKey]));
4644
}
4745
//check for changes in data source values
4846
if (!this.equalsDiff(this._config.dataSource, this._dataSource, diff)) {

‎src/igtreegrid/igtreegrid.component.ts‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,10 @@ export class IgTreeGridComponent extends IgGridBase<IgTreeGrid> {
3939

4040
//check for changes in collection
4141
this._changes = this._differ.diff(this._config.dataSource);
42-
if (this._config.dataSource.length !== this._dataSource.length) {
43-
this._dataSource = jQuery.extend(true, [], this._config.dataSource);
44-
if (this._changes) {
45-
this._changes.forEachAddedItem(r => this.addRow(r.item, r.currentIndex));
46-
this._changes.forEachRemovedItem(r => this.deleteRow(r.item[pkKey]))
47-
}
42+
if (this._changes && grid) {
43+
this._dataSource = jQuery.extend(true, [], this._config.dataSource);
44+
this._changes.forEachAddedItem(r => this.addRow(r.item, r.currentIndex));
45+
this._changes.forEachRemovedItem(r => this.deleteRow(r.item[pkKey]));
4846
}
4947
//check for changes in values
5048
if (!this.equalsDiff(this._config.dataSource, this._dataSource, diff)) {

‎tests/unit/iggrid/grid.spec.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -394,6 +394,25 @@ export function main() {
394394
});
395395
});
396396

397+
it("should detect changes when original data source is changed but the data source length is the same.", (done) => {
398+
var template = "<ig-grid [widgetId]='gridID' [(options)]='optsNew'></ig-grid>";
399+
TestBed.overrideComponent(TestComponent, {
400+
set: {
401+
template: template
402+
}
403+
});
404+
TestBed.compileComponents().then(() => {
405+
var fixture = TestBed.createComponent(TestComponent);
406+
fixture.componentInstance.singleRecData.length = 0;
407+
Array.prototype.push.apply( fixture.componentInstance.singleRecData, fixture.componentInstance.singleRecData2);
408+
fixture.detectChanges();
409+
let $grid = $("#grid1");
410+
expect($grid.data("igGrid").allRows().length === 1).toBeTruthy("There should be one record in grid.");
411+
expect($($grid.data("igGrid").cellById(1, "Name")).text() === "Test").toBeTruthy("Change in text should be reflected in grid.");
412+
done();
413+
});
414+
});
415+
397416
it('should initialize grid features 2', (done) => {
398417
var template = "<ig-grid [widgetId]='gridID' [width]='gridWidth' [autoCommit]='true' [dataSource]='data' [height]='h' [autoGenerateColumns]='false' [primaryKey]='\"Id\"'>" +
399418
"<column [key]=\"'Id'\" [(headerText)]=\"idHeaderText\" [width]=\"'165px'\" [dataType]=\"'number'\"></column>" +
@@ -636,9 +655,12 @@ class TestComponent {
636655
public opts1: any;
637656
public opts2: any;
638657
public opts3: any;
658+
public optsNew:any;
639659
private gridID: string;
640660
public data: Array<any>;
641661
public data1: Array<any>;
662+
public singleRecData: Array<any>;
663+
public singleRecData2: Array<any>;
642664
private cdi: number;
643665
public pi: number;
644666
private firedEvent: any;
@@ -648,6 +670,8 @@ class TestComponent {
648670
@ViewChild(Infragistics.IgGridComponent) public viewChild: Infragistics.IgGridComponent;
649671

650672
constructor() {
673+
this.singleRecData = [{ "Id": 1, "Name": "John Smith", "Age": 45, "HireDate": "2002-05-09" }];
674+
this.singleRecData2 = [{ "Id": 1, "Name": "Test", "Age": 45, "HireDate": "2002-05-09" }];
651675
this.gridID = "grid1";
652676
this.cdi = 0;
653677
this.caption = "My Caption";
@@ -717,6 +741,17 @@ class TestComponent {
717741
}
718742
]
719743
};
744+
this.optsNew = {
745+
dataSource: this.singleRecData,
746+
height: "300px",
747+
autoGenerateColumns: false,
748+
primaryKey: "Id",
749+
columns: [
750+
{ key: "Id", headerText: "Id", dataType: "number", hidden: true },
751+
{ key: "Name", headerText: "Name", dataType: "string", width: "100px" },
752+
{ key: "Age", headerText: "Age", dataType: "number", width: "100px", template: "Age: ${Age}" },
753+
{ key: "HireDate", headerText: "HireDate", dataType: "date", width: "100px" },
754+
]};
720755
}
721756

722757
public cellClickHandler(evt) {

‎tests/unit/ighierarchicalgrid/hierarchicalgrid.spec.ts‎

Lines changed: 65 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,25 @@ export function main() {
209209
});
210210
});
211211
});
212+
213+
it("should detect changes when original data source is changed but the data source length is the same.", (done) => {
214+
var template = '<ig-hierarchical-grid [(widgetId)]="gridID" [(options)]="optsNew"></ig-hierarchical-grid>';
215+
TestBed.overrideComponent(TestComponent, {
216+
set: {
217+
template: template
218+
}
219+
});
220+
TestBed.compileComponents().then(() => {
221+
var fixture = TestBed.createComponent(TestComponent);
222+
fixture.componentInstance.singleRecData.length = 0;
223+
Array.prototype.push.apply( fixture.componentInstance.singleRecData, fixture.componentInstance.singleRecData2);
224+
fixture.detectChanges();
225+
let $grid = $("#grid1");
226+
expect($grid.data("igGrid").allRows().length === 1).toBeTruthy("There should be one record in grid.");
227+
expect($($grid.data("igGrid").cellById(1, "Name")).text() === "Test").toBeTruthy("Change in text should be reflected in grid.");
228+
done();
229+
});
230+
});
212231
});
213232
}
214233

@@ -218,9 +237,13 @@ export function main() {
218237
})
219238
class TestComponent {
220239
private opts: any;
240+
private optsNew: any;
221241
private gridID: string;
222242
public data: any;
223243
protected cdi = 0;
244+
public singleRecData: Array<any>;
245+
public singleRecData2: Array<any>;
246+
224247
@ViewChild(Infragistics.IgHierarchicalGridComponent) public viewChild: Infragistics.IgHierarchicalGridComponent;
225248

226249
constructor() {
@@ -249,7 +272,21 @@ class TestComponent {
249272
]
250273
}
251274
];
252-
275+
this.singleRecData = [ {
276+
"ID": 0,
277+
"Name": "Food",
278+
"Products": [
279+
{ "ID": 0, "Name": "Bread", "Price": "2.5" }
280+
]
281+
}];
282+
this.singleRecData2 = [ {
283+
"ID": 1,
284+
"Name": "Test",
285+
"Products": [
286+
{ "ID": 1, "Name": "Milk", "Price": "3.5" },
287+
{ "ID": 2, "Name": "Vint soda", "Price": "20.9" }
288+
]
289+
}];
253290
this.gridID = "grid1";
254291
this.opts = {
255292
autoCommit: true,
@@ -283,5 +320,32 @@ class TestComponent {
283320
}
284321
]
285322
};
323+
this.optsNew = {
324+
autoCommit: true,
325+
dataSource: this.singleRecData,
326+
primaryKey: "ID",
327+
width: "100%",
328+
height: "400px",
329+
autoGenerateColumns: false,
330+
autoGenerateColumnLayouts: false,
331+
columns: [
332+
{ headerText: "ID", key: "ID", width: "50px", dataType: "number" },
333+
{ headerText: "Name", key: "Name", width: "130px", dataType: "string" }
334+
],
335+
columnLayouts: [
336+
{
337+
key: "Products",
338+
responseDataKey: "",
339+
childrenDataProperty: "Products",
340+
autoGenerateColumns: false,
341+
primaryKey: "ID",
342+
columns: [
343+
{ key: "ID", headerText: "ID", width: "25px" },
344+
{ key: "Name", headerText: "Product Name", width: "90px" },
345+
{ key: "Price", headerText: "Price", dataType: "number", width: "55px" }
346+
]
347+
}
348+
]
349+
};
286350
}
287351
}

‎tests/unit/igtreegrid/treegrid.spec.ts‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,25 @@ export function main() {
138138
}, 10);
139139
});
140140
});
141+
142+
it("should detect changes when original data source is changed but the data source length is the same.", (done) => {
143+
var template = '<ig-tree-grid [(widgetId)]="gridID" [(options)]="optsNew"></ig-tree-grid>';
144+
TestBed.overrideComponent(TestComponent, {
145+
set: {
146+
template: template
147+
}
148+
});
149+
TestBed.compileComponents().then(() => {
150+
var fixture = TestBed.createComponent(TestComponent);
151+
fixture.componentInstance.singleRecData.length = 0;
152+
Array.prototype.push.apply( fixture.componentInstance.singleRecData, fixture.componentInstance.singleRecData2);
153+
fixture.detectChanges();
154+
let $grid = $("#grid1");
155+
expect($grid.data("igTreeGrid").allRows().length === 1).toBeTruthy("There should be one record in grid.");
156+
expect($($grid.data("igTreeGrid").cellById(1, "tasks")).text() === "Test").toBeTruthy("Change in text should be reflected in grid.");
157+
done();
158+
});
159+
});
141160
});
142161
}
143162

@@ -147,16 +166,22 @@ export function main() {
147166
})
148167
class TestComponent {
149168
private opts: any;
169+
private optsNew: any;
150170
private gridID: string;
151171
public data: Array<any>;
152172
private cdi = 10;
173+
public singleRecData: Array<any>;
174+
public singleRecData2: Array<any>;
175+
153176
@ViewChild(Infragistics.IgTreeGridComponent) public viewChild: Infragistics.IgTreeGridComponent;
154177

155178
constructor() {
156179
this.gridID = "grid1";
157180
//this.cdi = 0;
158181
this.data = Tasks.getData();
159182

183+
this.singleRecData = [{ "id": 1, "tasks": "John Smith" }];
184+
this.singleRecData2 = [{ "id": 1, "tasks": "Test" }];
160185
this.opts = {
161186
autoCommit: true,
162187
dataSource: this.data,
@@ -179,5 +204,27 @@ class TestComponent {
179204
name: "Updating"
180205
}]
181206
};
207+
this.optsNew = {
208+
autoCommit: true,
209+
dataSource: this.singleRecData,
210+
width: "100%",
211+
height: "400px",
212+
autoGenerateColumns: false,
213+
autoGenerateColumnLayouts: false,
214+
primaryKey: "id",
215+
childDataKey: "products",
216+
renderExpansionIndicatorColumn: true,
217+
columns: [
218+
{ key: "id", headerText: "ID", width: "100px", dataType: "number" },
219+
{ key: "tasks", headerText: "Task", width: "250px", dataType: "string" },
220+
{ key: "start", headerText: "Start", width: "100px", dataType: "date" },
221+
{ key: "finish", headerText: "Finish", width: "100px", dataType: "date" },
222+
{ key: "duration", headerText: "Duration", width: "100px", dataType: "date" },
223+
{ key: "progress", headerText: "Progress", width: "100px", dataType: "date" }
224+
],
225+
features: [{
226+
name: "Updating"
227+
}]
228+
};
182229
}
183230
}

0 commit comments

Comments
 (0)