Improve declaring columns and features as nested directives

Author: dkamburov

samples/igGrid-ComplexOpts/app.ts

@@ -21,6 +21,7 @@ export class AppComponent {
 	private isReadOnly: boolean = true;
 	private cs: Array<any> = [{columnKey: "ProductID", readOnly: this.isReadOnly}];
 	private pi: number = 0;
+	private idHeaderText: string = "Id";
 	private pages: Array<number> = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
 	constructor() {

samples/igGrid-ComplexOpts/igGrid-ComplexOpts.html

@@ -71,6 +71,7 @@ <h1 class="push-down-md"><a href="http://igniteui.com/grid/overview" target="_bl
 	<!-- 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>

samples/igGrid-ComplexOpts/igGrid-ComplexOptsTemplate.html

@@ -5,7 +5,6 @@
 			<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>
-			<feature [name]="'Updating'" [(columnSettings)]="cs"></feature>
 			<feature [name]="'Paging'" [(currentPageIndex)]="pi" [pageSize]="'2'"></feature>
 		</ig-grid>
 
@@ -14,6 +13,8 @@
 		<select [(ngModel)]="pi" name="pageIndex">
 			<option *ngFor="let i of pages">{{i}}</option>
 		</select>
+		<br>
+		<label for="headerText">First column header text:</label><input name="headerText" [(ngModel)]="idHeaderText">{{idHeaderText}}
 	</div>
 
 </div>

src/igniteui.angular2.ts

@@ -65,13 +65,54 @@ module IgUtil {
 		}
 		return options;
 	}
+
+	export function extractAllGridColumnProperties() {
+		return ['headerText', 'key', 'formatter', 'format', 'dataType', 'width', 'hidden', 'template', 'unbound', 'group', 'rowspan', 'formula', 'unboundValues', 'unboundValuesUpdateMode', 'headerCssClass', 'columnCssClass'];
+	}
 }
 
 @Directive({
 	selector: 'column',
-	inputs: ['headerText', 'key', 'formatter', 'format', 'dataType', 'width', 'hidden', 'template', 'unbound', 'group', 'rowspan', 'formula', 'unboundValues', 'unboundValuesUpdateMode', 'headerCssClass', 'columnCssClass']
+	inputs: IgUtil.extractAllGridColumnProperties()
 })
-export class Column {}
+export class Column {
+	private _settings: any = {};
+	private _el: any;
+
+	constructor(el: ElementRef) {
+		this._el = el;
+		let self = this;
+		let i, settings = IgUtil.extractAllGridColumnProperties();
+		for(i = 0; i < settings.length; i++) {
+			Object.defineProperty(self, settings[i], {
+				set: self.createColumnsSetter(settings[i]),
+				get: self.createColumnsGetter(settings[i]),
+				enumerable: true,
+				configurable: true
+			});
+		}
+	}
+
+	createColumnsSetter(name) {
+		return function (value) {
+			let grid = jQuery(this._el.nativeElement.parentElement).find("table[role='grid']");
+			this._settings[name] = value;
+
+			if (jQuery.ui["igGrid"] &&
+				jQuery.ui["igGrid"].prototype.options &&
+				jQuery.ui["igGrid"].prototype.options.hasOwnProperty("columns") &&
+				grid.data("igGrid")) {
+				grid["igGrid"]("option", "columns", this._settings);
+			}
+		}
+	}
+
+	createColumnsGetter(name) {
+		return function () {
+			return this._settings[name];
+		}
+	}
+}
 
 @Directive({
 	selector: 'feature',
@@ -81,12 +122,10 @@ export class Column {}
 export class Feature {
 	private _el: any;
 	private _settings: any = {};
-	@Input() public name: string;
-
-	constructor(el: ElementRef) {
-		this._el = el;
+	@Input() set name(name: string) {
+		this._settings["name"] = name;
 		var self = this;
-		let featureName = "igGrid" + this.name;
+		let featureName = "igGrid" + name;
 		for (var setting in jQuery.ui[featureName].prototype.options) {
 			Object.defineProperty(self, setting, {
 				set: self.createFeatureSetter(setting),
@@ -97,8 +136,12 @@ export class Feature {
 		}
 	}
 
-	ngOnInit() {
-		
+	get name():string {
+		return this._settings["name"];
+	}
+
+	constructor(el: ElementRef) {
+		this._el = el;
 	}
 
 	createFeatureSetter(name) {
@@ -396,10 +439,10 @@ export class IgGridBase<Model> extends IgControlBase<Model> implements AfterCont
 
 	ngAfterContentInit() {
 		if (this._columns.length) {
-			this._opts["columns"] = this._columns.map((c) => c);
+			this._opts["columns"] = this._columns.map((c) => c._settings);
 		}
 		if (this._features.length) {
-			this._opts["features"] = this._features.map((c) => c);
+			this._opts["features"] = this._features.map((c) => c._settings);
 		}
 		super.ngOnInit();
 	}