Create POC for grid features as a nested directives

Author: dkamburov

samples/igGrid-ComplexOpts/app.ts

@@ -1,13 +1,15 @@
-import {Component, Inject, ElementRef, EventEmitter, HostListener} from '@angular/core';
-import {IgGridComponent, Column} from "../../src/igniteui.angular2.ts";
+import {Component, Directive, Inject, ElementRef, EventEmitter, HostListener} from '@angular/core';
+import {IgGridComponent, Column, Feature} from "../../src/igniteui.angular2.ts";
 import {Northwind} from "./../data/northwind.ts";
 import {bootstrap }    from '@angular/platform-browser-dynamic';
+import {FORM_DIRECTIVES} from '@angular/common';
 
 declare var jQuery: any;
+
 @Component({
 	selector: 'my-app',
 	templateUrl: "./igGrid-ComplexOptsTemplate.html",
-	directives: [IgGridComponent, Column]
+	directives: [IgGridComponent, Column, Feature, FORM_DIRECTIVES]
 })
 export class AppComponent {
 	private cols: Array<any>;
@@ -16,6 +18,10 @@ export class AppComponent {
 	private w: string;
 	private h: string;
 	private pKey: string;
+	private isReadOnly: boolean = true;
+	private cs: Array<any> = [{columnKey: "ProductID", readOnly: this.isReadOnly}];
+	private pi: number = 0;
+	private pages: Array<number> = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
 	constructor() {
 		this.data = Northwind.getData();

samples/igGrid-ComplexOpts/igGrid-ComplexOptsTemplate.html

@@ -1,10 +1,19 @@
 <div class="row">
 	<div class="col-md-12">
-		<ig-grid [widgetId]='id' [width]='w' [autoCommit]='true' [dataSource]='data' [height]='h' [autoGenerateColumns]='false'>
-			<column [key]="'ProductID'" [headerText]="'Product ID'" [width]="'65px'" [dataType]="'number'"></column>
+		<ig-grid [widgetId]='id' [width]='w' [autoCommit]='true' [dataSource]='data' [height]='h' [autoGenerateColumns]='false' [primaryKey]='"ProductID"'>
+			<column [key]="'ProductID'" [(headerText)]="idHeaderText" [width]="'165px'" [dataType]="'number'"></column>
 			<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>
+
+		<br>
+		<label for="pageIndex">Current Page Index:</label>
+		<select [(ngModel)]="pi" name="pageIndex">
+			<option *ngFor="let i of pages">{{i}}</option>
+		</select>
 	</div>
+
 </div>

src/igniteui.angular2.ts

@@ -53,12 +53,75 @@ var NODES = {
 
 const _reflect: any = Reflect;
 
+module IgUtil {
+	export function extractAllGridFeatureOptions() {
+		let allWidgets = jQuery.ui;
+		let options = ["name"];
+		let widget: any;
+		for (widget in allWidgets) {
+			if (widget.substring(0, 6) === "igGrid" && widget !== "igGrid") {
+				options = options.concat(Object.keys(jQuery.ui[widget].prototype.options));
+			}
+		}
+		return options;
+	}
+}
+
 @Directive({
 	selector: 'column',
 	inputs: ['headerText', 'key', 'formatter', 'format', 'dataType', 'width', 'hidden', 'template', 'unbound', 'group', 'rowspan', 'formula', 'unboundValues', 'unboundValuesUpdateMode', 'headerCssClass', 'columnCssClass']
 })
-export class Column {
-	key:string;
+export class Column {}
+
+@Directive({
+	selector: 'feature',
+	inputs: IgUtil.extractAllGridFeatureOptions()
+})
+
+export class Feature {
+	private _el: any;
+	private _settings: any = {};
+	@Input() public name: string;
+
+	constructor(el: ElementRef) {
+		this._el = el;
+		var self = this;
+		let featureName = "igGrid" + this.name;
+		for (var setting in jQuery.ui[featureName].prototype.options) {
+			Object.defineProperty(self, setting, {
+				set: self.createFeatureSetter(setting),
+				get: self.createFeatureGetter(setting),
+				enumerable: true,
+				configurable: true
+			});
+		}
+	}
+
+	ngOnInit() {
+		
+	}
+
+	createFeatureSetter(name) {
+		return function (value) {
+			let grid = jQuery(this._el.nativeElement.parentElement).find("table[role='grid']");
+			let featureName = "igGrid" + this.name;
+			this._settings[name] = value;
+
+			if (this.name !== undefined && this.name !== null &&
+				jQuery.ui[featureName] &&
+				jQuery.ui[featureName].prototype.options &&
+				jQuery.ui[featureName].prototype.options.hasOwnProperty(name) &&
+				grid.data(featureName)) {
+				grid[featureName]("option", name, value);
+			}
+		}
+	}
+
+	createFeatureGetter(name) {
+		return function () {
+			return this._settings[name];
+		}
+	}
 }
 
 export function IgComponent(args: any = {}) {
@@ -321,6 +384,7 @@ export class IgGridBase<Model> extends IgControlBase<Model> implements AfterCont
 	protected _dataSource: any;
 	protected _changes: any;
 	@ContentChildren(Column) _columns: QueryList<Column>;
+	@ContentChildren(Feature) _features: QueryList<Feature>;
 
 	constructor(el: ElementRef, renderer: Renderer, differs: IterableDiffers) { super(el, renderer, differs); }
 
@@ -334,6 +398,9 @@ export class IgGridBase<Model> extends IgControlBase<Model> implements AfterCont
 		if (this._columns.length) {
 			this._opts["columns"] = this._columns.map((c) => c);
 		}
+		if (this._features.length) {
+			this._opts["features"] = this._features.map((c) => c);
+		}
 		super.ngOnInit();
 	}