Skip to content

Commit 8855d89

Browse files
dkamburovdkamburov
committed
POC for declaring columns into the template
1 parent 2828909 commit 8855d89

File tree

5 files changed

+154
-6
lines changed

5 files changed

+154
-6
lines changed

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,7 @@ <h2>Samples</h2>
208208
<ul class="dropdown-menu" role="menu">
209209
<li><a href="samples/igGrid/igGrid.html">Default</a></li>
210210
<li><a href="samples/igGrid-TopLevelOpts/igGrid-TopLevelOpts.html">Top-level template options</a></li>
211+
<li><a href="samples/igGrid-ComplexOpts/igGrid-ComplexOpts.html">Complex template options</a></li>
211212
</ul>
212213
</div>
213214
<a class="btn btn-default" href="samples/igHierarchicalGrid/igHierarchicalGrid.html">igHierarchicalGrid</a>

‎samples/igGrid-ComplexOpts/app.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import {Component, Inject, ElementRef, EventEmitter, HostListener} from '@angular/core';
2+
import {IgGridComponent, Column} from "../../src/igniteui.angular2.ts";
3+
import {Northwind} from "./../data/northwind.ts";
4+
import {bootstrap } from '@angular/platform-browser-dynamic';
5+
6+
declare var jQuery: any;
7+
@Component({
8+
selector: 'my-app',
9+
templateUrl: "./igGrid-ComplexOptsTemplate.html",
10+
directives: [IgGridComponent, Column]
11+
})
12+
export class AppComponent {
13+
private cols: Array<any>;
14+
private id: string;
15+
private data: any;
16+
private w: string;
17+
private h: string;
18+
private pKey: string;
19+
20+
constructor() {
21+
this.data = Northwind.getData();
22+
23+
this.id ='grid1';
24+
this.w = '100%';
25+
this.h = '400px';
26+
this.pKey = 'ProductID';
27+
28+
this.cols = [
29+
{ key: "ProductID", headerText: "Product ID", width:"50px", dataType:"number" },
30+
{ key: "ProductName", headerText: "Name", width:"250px", dataType:"string" },
31+
{ key: "QuantityPerUnit", headerText: "Quantity per unit", width:"250px", dataType:"string" },
32+
{ key: "UnitPrice", headerText: "Unit Price", width:"100px", dataType:"number" }
33+
];
34+
}
35+
}
36+
37+
bootstrap(AppComponent);

‎samples/igGrid-ComplexOpts/igGrid-ComplexOpts.html‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Angular 2 IgniteUI custom component</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" />
8+
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" type="text/css" />
9+
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
10+
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet" type="text/css" />
11+
<link rel="stylesheet" href="../sample.css" />
12+
13+
</head>
14+
<body class="container">
15+
16+
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
17+
<div class="container">
18+
<div class="navbar-header">
19+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
20+
<span class="sr-only">Toggle navigation</span>
21+
<span class="icon-bar"></span>
22+
<span class="icon-bar"></span>
23+
<span class="icon-bar"></span>
24+
</button>
25+
<a class="navbar-brand" href="/">Ignite UI Angular 2 components <span class="badge alert-info">Preview</span></a>
26+
</div>
27+
<div class="navbar-collapse collapse">
28+
<ul class="nav navbar-nav">
29+
<li><a href="/igniteui-angular2/index.html">Home</a></li>
30+
<li><a href="https://github.com/IgniteUI/igniteui-angular2">View on GitHub <i class="fa fa-github"></i></a></li>
31+
</ul>
32+
</div>
33+
</div>
34+
</div>
35+
<div>
36+
<h1 class="push-down-md"><a href="http://igniteui.com/grid/overview" target="_blank">igGrid</a></h1>
37+
38+
<div class="row description">
39+
<div class="col-md-12">
40+
<p class="lead">This sample demonstrates how AngularJS components are used to initialize the igGrid complex options though the template.</p>
41+
<p><a href="https://github.com/IgniteUI/igniteui-angular2/blob/master/samples/igGrid/igGrid.html" class="btn btn-default btn-lg btn-primary" target="_blank"><i class="fa fa-code fa-lg"></i> Explore the Code</a></p>
42+
</div>
43+
</div>
44+
45+
<my-app>Loading...</my-app>
46+
47+
48+
</div>
49+
<footer>
50+
<p>
51+
<a href="/igniteui-angular2/index.html">Home</a> |
52+
<a href="https://github.com/IgniteUI/igniteui-angular2/issues">Feedback &amp; Questions</a> |
53+
<a href="https://github.com/IgniteUI/igniteui-angular2">Clone &amp; Fork</a>
54+
</p>
55+
<p class="small">For more information or to download a trial of Ignite UI, please visit: <a href="http://www.igniteui.com">http://www.igniteui.com</a></p>
56+
</footer>
57+
58+
<!-- 1. Load libraries -->
59+
<script src="http://code.jquery.com/jquery-1.12.3.js"></script>
60+
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
61+
<!-- IE required polyfills, in this exact order -->
62+
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
63+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
64+
<script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
65+
66+
<script src="https://npmcdn.com/[email protected]?main=browser"></script>
67+
<script src="https://npmcdn.com/[email protected]/lib/typescript.js"></script>
68+
<script src="https://npmcdn.com/[email protected]"></script>
69+
<script src="https://npmcdn.com/[email protected]/dist/system.src.js"></script>
70+
<script src="./../../systemjs.config.js"></script>
71+
<!-- Ignite UI Required Combined JavaScript Files -->
72+
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
73+
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
74+
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
75+
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
76+
<script>
77+
System.import('app.ts')
78+
.then(null, console.error.bind(console));
79+
</script>
80+
</body>
81+
</html>

‎samples/igGrid-ComplexOpts/igGrid-ComplexOptsTemplate.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div class="row">
2+
<div class="col-md-12">
3+
<ig-grid [widgetId]='id' [width]='w' [autoCommit]='true' [dataSource]='data' [height]='h' [autoGenerateColumns]='false'>
4+
<column [key]="'ProductID'" [headerText]="'Product ID'" [width]="'65px'" [dataType]="'number'"></column>
5+
<column [key]="'ProductName'" [headerText]="'Product Name'" [width]="'250px'" [dataType]="'string'"></column>
6+
<column [key]="'QuantityPerUnit'" [headerText]="'Quantity per unit'" [width]="'250px'" [dataType]="'string'"></column>
7+
<column [key]="'UnitPrice'" [headerText]="'Unit Price'" [width]="'100px'" [dataType]="'number'"></column>
8+
</ig-grid>
9+
</div>
10+
</div>

‎src/igniteui.angular2.ts‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
/// <reference path="./../typings/browser.d.ts"/>
44

55
import {Component, Directive, Inject, ElementRef, EventEmitter, Output, Input, Query, QueryList, Renderer, OnChanges, NgZone,
6-
SimpleChange, ChangeDetectionStrategy, IterableDiffers, DoCheck, Optional} from '@angular/core';
6+
SimpleChange, ChangeDetectionStrategy, IterableDiffers, DoCheck, Optional, ContentChildren, AfterContentInit} from '@angular/core';
77
import {NgModel, ControlValueAccessor} from '@angular/common';
88

99
declare var jQuery: any;
@@ -53,6 +53,14 @@ var NODES = {
5353

5454
const _reflect: any = Reflect;
5555

56+
@Directive({
57+
selector: 'column',
58+
inputs: ['headerText', 'key', 'formatter', 'format', 'dataType', 'width', 'hidden', 'template', 'unbound', 'group', 'rowspan', 'formula', 'unboundValues', 'unboundValuesUpdateMode', 'headerCssClass', 'columnCssClass']
59+
})
60+
export class Column {
61+
key:string;
62+
}
63+
5664
export function IgComponent(args: any = {}) {
5765

5866
return function (cls) {
@@ -73,7 +81,7 @@ export function IgComponent(args: any = {}) {
7381
});
7482

7583
var evt = [];
76-
var opts = [];
84+
var opts = ["options", "widgetId", "changeDetectionInterval"];
7785
if (jQuery.ui[contrName]) {
7886
for (var propt in jQuery.ui[contrName].prototype.events) {
7987
evt.push(propt);
@@ -93,8 +101,8 @@ export function IgComponent(args: any = {}) {
93101
}
94102

95103
export class IgControlBase<Model> implements DoCheck {
96-
private _opts: any = {};
97104
private _differs: any;
105+
protected _opts: any = {};
98106
protected _el: any;
99107
protected _widgetName: string;
100108
protected _differ: any;
@@ -139,11 +147,13 @@ export class IgControlBase<Model> implements DoCheck {
139147
createSetter(name) {
140148
return function (value) {
141149
this._opts[name] = value;
150+
if (this._config) {
151+
this._config[name] = value;
152+
}
142153
if (jQuery.ui[this._widgetName] &&
143154
jQuery.ui[this._widgetName].prototype.options &&
144155
jQuery.ui[this._widgetName].prototype.options.hasOwnProperty(name) &&
145156
jQuery(this._el).data(this._widgetName)) {
146-
this._config[name] = value;
147157
jQuery(this._el)[this._widgetName]("option", name, value);
148158
}
149159
}
@@ -307,15 +317,24 @@ export class IgControlBase<Model> implements DoCheck {
307317
}
308318
}
309319

310-
export class IgGridBase<Model> extends IgControlBase<Model> {
320+
export class IgGridBase<Model> extends IgControlBase<Model> implements AfterContentInit {
311321
protected _dataSource: any;
312322
protected _changes: any;
323+
@ContentChildren(Column) _columns: QueryList<Column>;
313324

314325
constructor(el: ElementRef, renderer: Renderer, differs: IterableDiffers) { super(el, renderer, differs); }
315326

316327
ngOnInit() {
328+
this._dataSource = this._opts.dataSource ?
329+
JSON.parse(JSON.stringify(this._opts.dataSource)) :
330+
JSON.parse(JSON.stringify(this._config.dataSource));
331+
}
332+
333+
ngAfterContentInit() {
334+
if (this._columns.length) {
335+
this._opts["columns"] = this._columns.map((c) => c);
336+
}
317337
super.ngOnInit();
318-
this._dataSource = JSON.parse(JSON.stringify(this._config.dataSource));
319338
}
320339

321340
deleteRow(id) {

0 commit comments

Comments
 (0)