Skip to content

Commit c524996

Browse files
dkamburovdkamburov
committed
Fix an issue with templating and add test for it
1 parent 36d3944 commit c524996

File tree

3 files changed

+94
-70
lines changed

3 files changed

+94
-70
lines changed

‎src/igniteui.angular2.ts‎

Lines changed: 65 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -96,8 +96,8 @@ export class IgControlBase<Model> implements DoCheck {
9696
protected _differ: any;
9797
protected _config: any;
9898
protected _events: Map<string, string>;
99-
protected _allowChangeDetection = true;
100-
99+
protected _allowChangeDetection = true;
100+
101101
@Input() set options(v: Model) {
102102
this._config = v;
103103
this._differ = this._differs.find([]).create(null);
@@ -107,7 +107,7 @@ export class IgControlBase<Model> implements DoCheck {
107107
}
108108
};
109109
@Input() widgetId: string;
110-
@Input() changeDetectionInterval:number;
110+
@Input() changeDetectionInterval:number;
111111

112112
constructor(el: ElementRef, renderer: Renderer, differs: IterableDiffers) {
113113
this._differs = differs;
@@ -117,7 +117,7 @@ export class IgControlBase<Model> implements DoCheck {
117117
for (var propt in jQuery.ui[this._widgetName].prototype.events) {
118118
this[propt] = new EventEmitter();
119119
}
120-
120+
121121
}
122122

123123
ngOnInit() {
@@ -134,24 +134,24 @@ export class IgControlBase<Model> implements DoCheck {
134134
that[that._events[evt.type]].emit({ event: evt, ui: ui });
135135
});
136136
}
137-
138-
if(this.changeDetectionInterval === undefined || this.changeDetectionInterval === null){
139-
this.changeDetectionInterval= 500;
140-
}
141-
142-
setInterval(function(){
143-
that._allowChangeDetection = true;
144-
},this.changeDetectionInterval);
137+
138+
if(this.changeDetectionInterval === undefined || this.changeDetectionInterval === null){
139+
this.changeDetectionInterval= 500;
140+
}
141+
142+
setInterval(function(){
143+
that._allowChangeDetection = true;
144+
},this.changeDetectionInterval);
145145

146146
jQuery(this._el).attr("id", this.widgetId);
147147
jQuery(this._el)[this._widgetName](this._config);
148148
}
149149

150150
ngDoCheck() {
151-
if(this._allowChangeDetection){
152-
this._allowChangeDetection = false;
153-
this.optionChange();
154-
}
151+
if(this._allowChangeDetection){
152+
this._allowChangeDetection = false;
153+
this.optionChange();
154+
}
155155
}
156156

157157
optionChange() {
@@ -276,9 +276,9 @@ export class IgControlBase<Model> implements DoCheck {
276276
export class IgGridBase<Model> extends IgControlBase<Model> {
277277
protected _dataSource: any;
278278
protected _changes: any;
279-
279+
280280
constructor(el: ElementRef, renderer: Renderer, differs: IterableDiffers) { super(el, renderer, differs); }
281-
281+
282282
ngOnInit() {
283283
super.ngOnInit();
284284
this._dataSource = JSON.parse(JSON.stringify(this._config.dataSource));
@@ -291,7 +291,7 @@ export class IgGridBase<Model> extends IgControlBase<Model> {
291291
if (tr.length > 0) {
292292
tr.remove();
293293
jQuery(this._el).data(this._widgetName).dataSource.deleteRow(id, true);
294-
jQuery(this._el).data(this._widgetName).dataSource._removeTransactionsByRecordId(id);
294+
jQuery(this._el).data(this._widgetName).dataSource._removeTransactionsByRecordId(id);
295295
}
296296
}
297297

@@ -324,13 +324,13 @@ export class IgGridBase<Model> extends IgControlBase<Model> {
324324

325325
ngDoCheck() {
326326
if (this._differ != null && this._allowChangeDetection) {
327-
this.optionChange();
328-
this._allowChangeDetection = false;
327+
this.optionChange();
328+
this._allowChangeDetection = false;
329329
var diff = [],
330330
element = jQuery(this._el),
331331
grid = element.data(this._widgetName),
332332
colIndex, td, i, j, pkKey = this._config.primaryKey, newFormattedVal, record, column;
333-
333+
334334
//check for changes in collection
335335
this._changes = this._differ.diff(this._config.dataSource);
336336
if (this._config.dataSource.length !== this._dataSource.length) {
@@ -352,7 +352,7 @@ export class IgGridBase<Model> extends IgControlBase<Model> {
352352
column = element.data(this._widgetName).columnByKey(diff[i].txlog[j].key);
353353
if (column) {
354354
if (column.template) {
355-
newFormattedVal = grid._renderTemplatedCell(diff[i].txlog[j].newVal, column).substring(1);
355+
newFormattedVal = grid._renderTemplatedCell(diff[i].txlog[j].newVal, column);
356356
} else {
357357
newFormattedVal = grid._renderCell(diff[i].txlog[j].newVal, column, record);
358358
}
@@ -379,30 +379,30 @@ export class IgTreeGridComponent extends IgGridBase<IgTreeGrid> {
379379
deleteRow(id) {
380380
var element = jQuery(this._el),
381381
tr = element.find("tr[data-id='" + id + "']"),
382-
dataLevel = tr.attr("aria-level");
382+
dataLevel = tr.attr("aria-level");
383383
if (tr.length > 0) {
384384

385385
element.data(this._widgetName).dataSource.deleteRow(id, true);
386386
element.data(this._widgetName).dataSource._removeTransactionsByRecordId(id);
387387

388388
var trs = tr.nextUntil("tr[data-level="+dataLevel+"]");
389-
if(trs.length === 0){
390-
trs = tr.nextAll("tr[data-level]");
391-
}
392-
393-
tr.remove();
394-
trs.remove();
389+
if(trs.length === 0){
390+
trs = tr.nextAll("tr[data-level]");
391+
}
392+
393+
tr.remove();
394+
trs.remove();
395395
}
396396
}
397-
ngDoCheck() {
397+
ngDoCheck() {
398398
if (this._differ != null && this._allowChangeDetection) {
399-
this.optionChange();
400-
this._allowChangeDetection = false;
399+
this.optionChange();
400+
this._allowChangeDetection = false;
401401
var diff = [],
402402
element = jQuery(this._el),
403403
grid = element.data(this._widgetName),
404404
colIndex, td, i, j, pkKey = this._config.primaryKey, newFormattedVal, record, column;
405-
405+
406406
//check for changes in collection
407407
this._changes = this._differ.diff(this._config.dataSource);
408408
if (this._config.dataSource.length !== this._dataSource.length) {
@@ -424,17 +424,17 @@ export class IgTreeGridComponent extends IgGridBase<IgTreeGrid> {
424424
column = element.data(this._widgetName).columnByKey(diff[i].txlog[j].key);
425425
if (column) {
426426
if (column.template) {
427-
newFormattedVal = grid._renderTemplatedCell(diff[i].txlog[j].newVal, column).substring(1);
427+
newFormattedVal = grid._renderTemplatedCell(diff[i].txlog[j].newVal, column);
428428
} else {
429429
newFormattedVal = grid._renderCell(diff[i].txlog[j].newVal, column, record);
430430
}
431431
jQuery(td).html(newFormattedVal);
432432
grid.dataSource.updateRow(record[pkKey], record);
433433
grid.dataSource._commitTransactionsByRowId(record[pkKey]);
434434
} else if(diff[i].txlog[j].key === this._config.childDataKey){
435-
//we have an hierarchical data source and one of the nested collections has changed.
436-
grid.dataBind();
437-
}
435+
//we have an hierarchical data source and one of the nested collections has changed.
436+
grid.dataBind();
437+
}
438438
}
439439
}
440440
}
@@ -462,7 +462,7 @@ export class IgHierarchicalGridComponent extends IgGridBase<IgHierarchicalGrid>
462462
ngDoCheck() {
463463
this.optionChange();
464464
if (this._differ != null && this._allowChangeDetection) {
465-
this._allowChangeDetection = false;
465+
this._allowChangeDetection = false;
466466
var diff = [],
467467
element = jQuery(this._el),
468468
colIndex, td, i, j, pkKey = this._config.primaryKey, newFormattedVal, record, column,
@@ -478,7 +478,7 @@ export class IgHierarchicalGridComponent extends IgGridBase<IgHierarchicalGrid>
478478
this._changes.forEachRemovedItem(r => this.deleteRow(r.item[pkKey]))
479479
}
480480
}
481-
//check for changes in data source values
481+
//check for changes in data source values
482482
if (!this.equalsDiff(this._config.dataSource, this._dataSource, diff)) {
483483
this._dataSource = JSON.parse(JSON.stringify(this._config.dataSource));
484484
for (i = 0; i < diff.length; i++) {
@@ -487,8 +487,8 @@ export class IgHierarchicalGridComponent extends IgGridBase<IgHierarchicalGrid>
487487
var parentRow = jQuery(this.element).closest('tr[data-container]').prev();
488488
var parentGridPK = parentRow.closest(".ui-iggrid-table").data("igGrid").options.primaryKey;
489489
return (this.options.childrenDataProperty === diff[i].txlog[j].key ||
490-
parentRow.next("[data-container]").find("table[role='grid']").attr("id").contains("_" + diff[i].txlog[j].key + "_"))
491-
&& parentRow.attr("data-id") == data[diff[i].index][parentGridPK];
490+
parentRow.next("[data-container]").find("table[role='grid']").attr("id").contains("_" + diff[i].txlog[j].key + "_"))
491+
&& parentRow.attr("data-id") == data[diff[i].index][parentGridPK];
492492
});
493493
if (childGrid.length > 0) {
494494
jQuery(childGrid).each(function () {
@@ -502,7 +502,7 @@ export class IgHierarchicalGridComponent extends IgGridBase<IgHierarchicalGrid>
502502
column = mainGrid.columnByKey(diff[i].txlog[j].key);
503503
if (column) {
504504
if (column.template) {
505-
newFormattedVal = mainGrid._renderTemplatedCell(diff[i].txlog[j].newVal, column).substring(1);
505+
newFormattedVal = mainGrid._renderTemplatedCell(diff[i].txlog[j].newVal, column);
506506
} else {
507507
newFormattedVal = mainGrid._renderCell(diff[i].txlog[j].newVal, column, record);
508508
}
@@ -564,8 +564,8 @@ export class IgComboComponent extends IgControlBase<IgCombo> implements ControlV
564564

565565
ngDoCheck() {
566566
if (this._differ != null && this._allowChangeDetection) {
567-
this.optionChange();
568-
this._allowChangeDetection = false;
567+
this.optionChange();
568+
this._allowChangeDetection = false;
569569
var diff = [];
570570
var element = jQuery(this._el);
571571
var i, j, valKey = this._config.valueKey, record, item;
@@ -678,8 +678,8 @@ export class IgTreeComponent extends IgControlBase<IgTree> {
678678

679679
ngDoCheck() {
680680
if (this._differ != null && this._allowChangeDetection) {
681-
this.optionChange();
682-
this._allowChangeDetection = false;
681+
this.optionChange();
682+
this._allowChangeDetection = false;
683683
var diff = [];
684684
var element = jQuery(this._el);
685685
var i, j, valKey = this._config.valueKey, record, item;
@@ -723,30 +723,30 @@ export class IgTileManagerComponent extends IgContentControlBase<IgTileManager>
723723

724724
@IgComponent()
725725
export class IgHtmlEditorComponent extends IgControlBase<IgHtmlEditor> implements ControlValueAccessor {
726-
protected _model: any;
727-
protected _zone: any;
728-
constructor(el: ElementRef, renderer: Renderer, differs: IterableDiffers, @Optional() public model: NgModel, private zone:NgZone ) { super(el, renderer, differs);
729-
if (model) {
726+
protected _model: any;
727+
protected _zone: any;
728+
constructor(el: ElementRef, renderer: Renderer, differs: IterableDiffers, @Optional() public model: NgModel, private zone:NgZone ) { super(el, renderer, differs);
729+
if (model) {
730730
model.valueAccessor = this;
731-
this._zone = zone;
731+
this._zone = zone;
732732
this._model = model;
733733
}
734-
}
735-
ngOnInit() {
734+
}
735+
ngOnInit() {
736736
super.ngOnInit();
737-
let that = this;
738-
if (this._model) {
739-
var iframe=jQuery(this._el).find("iframe")[0].contentWindow.document;
737+
let that = this;
738+
if (this._model) {
739+
var iframe=jQuery(this._el).find("iframe")[0].contentWindow.document;
740740
jQuery(iframe).find("body[contenteditable=true]").on("keyup", function (evt, ui) {
741741
that._model.viewToModelUpdate(jQuery(evt.target).html());
742-
that._zone.run(() => {
743-
that._model.viewToModelUpdate(jQuery(evt.target).html());
744-
});
742+
that._zone.run(() => {
743+
that._model.viewToModelUpdate(jQuery(evt.target).html());
744+
});
745745
});
746746
}
747747

748748
}
749-
writeValue(value: any) {
749+
writeValue(value: any) {
750750
if (!!jQuery(this._el).data(this._widgetName) && value !== null && value !== jQuery(this._el)[this._widgetName]("getContent","html")) {
751751
jQuery(this._el)[this._widgetName]("setContent", value, "html");
752752
}
@@ -764,7 +764,7 @@ export class IgHtmlEditorComponent extends IgControlBase<IgHtmlEditor> implement
764764
registerOnTouched(fn: () => {}): void {
765765
this.onTouched = fn;
766766
}
767-
}
767+
}
768768

769769

770770
@IgComponent()
@@ -777,7 +777,7 @@ export class IgValidatorComponent extends IgControlBase<IgValidator> {
777777
var evtName;
778778
this._el = jQuery(document).find("#" + this.widgetId);
779779
jQuery(this._el)[this._widgetName](this._config);
780-
this._events = new Map<string, string>();
780+
this._events = new Map<string, string>();
781781
//events binding
782782
let that = this;
783783
for (var propt in jQuery.ui[this._widgetName].prototype.events) {
@@ -845,7 +845,7 @@ export class IgPopoverComponent extends IgControlBase<IgPopover> {
845845
var elem = jQuery(document).find("#" + this.widgetId);
846846
if (elem.length === 1) {
847847
this._el = elem;
848-
this._events = new Map<string, string>();
848+
this._events = new Map<string, string>();
849849
//events binding
850850
let that = this;
851851
var evtName;
@@ -876,7 +876,7 @@ export class IgNotifierComponent extends IgControlBase<any> {
876876
var elem = jQuery(document).find("#" + this.widgetId);
877877
if (elem.length === 1) {
878878
this._el = elem;
879-
this._events = new Map<string, string>();
879+
this._events = new Map<string, string>();
880880
//events binding
881881
let that = this;
882882
var evtName;

‎tests/karma.conf.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ module.exports = function(config){
2929
{ pattern: "node_modules/rxjs/**/*.js", included: false, watched: false },
3030

3131
// paths loaded via module imports
32-
{pattern: "src/*.js", included: false, watched: true},
32+
{pattern: "src/*", included: false, watched: true},
3333

3434
// spec files need to be loaded in the shim file IN CONTEXT of the main module, don't include:
3535
{ pattern: "tests/unit/**/*.spec.js", included: false, watched: true }

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

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,22 @@ export function main() {
139139
}, 10);
140140
});
141141
}));
142+
143+
it('should allow column templates', injectAsync([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
144+
var template = '<div><ig-grid [(widgetId)]="gridID" [(options)]="opts1" [changeDetectionInterval]="cdi"></ig-grid></div>';
145+
tcb.overrideTemplate(TestComponent, template)
146+
.createAsync(TestComponent)
147+
.then((fixture) => {
148+
fixture.detectChanges();
149+
fixture.componentInstance.data[0].Age = 42;
150+
setTimeout(() => {
151+
fixture.detectChanges();
152+
expect($(fixture.debugElement.nativeElement).find("#grid1 tr[data-id='1'] td[aria-describedby='grid1_Age']").text())
153+
.toBe("Age: 42");
154+
async.done();
155+
}, 10);
156+
});
157+
}));
142158
});
143159
}
144160

@@ -160,9 +176,9 @@ class TestComponent {
160176
this.gridID = "grid1";
161177
this.cdi = 0;
162178
this.data = [
163-
{ "Id": 1, "Name": "John Smith", "Age": 45 },
164-
{ "Id": 2, "Name": "Mary Johnson", "Age": 32 },
165-
{ "Id": 3, "Name": "Bob Ferguson", "Age": 27 }
179+
{ "Id": 1, "Name": "John Smith", "Age": 45, "HireDate": "\/Date(704678400000)\/" },
180+
{ "Id": 2, "Name": "Mary Johnson", "Age": 32, "HireDate": "\/Date(794678400000)\/" },
181+
{ "Id": 3, "Name": "Bob Ferguson", "Age": 27, "HireDate": "\/Date(834678400000)\/" }
166182
]
167183
this.opts = {
168184
primaryKey: "Id",
@@ -175,7 +191,15 @@ class TestComponent {
175191

176192
this.opts1 = {
177193
dataSource: this.data,
178-
height: "300px"
194+
height: "300px",
195+
autoGenerateColumns: false,
196+
primaryKey: "Id",
197+
columns: [
198+
{ key: "Id", headerText: "Id", dataType: "number", hidden: true },
199+
{ key: "Name", headerText: "Name", dataType: "string", width: "100px" },
200+
{ key: "Age", headerText: "Age", dataType: "number", width: "100px", template: "Age: ${Age}" },
201+
{ key: "HireDate", headerText: "HireDate", dataType: "date", width: "100px" },
202+
]
179203
};
180204
}
181205

0 commit comments

Comments
 (0)