Skip to content

Commit 3e040f2

Browse files
dkamburovdkamburov
committed
Add the sample for top level options
1 parent ce3f7a6 commit 3e040f2

File tree

3 files changed

+131
-0
lines changed

3 files changed

+131
-0
lines changed

‎samples/igGrid-TopLevelOpts/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} 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-TopLevelOptsTemplate.html",
10+
directives: [IgGridComponent]
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-TopLevelOpts/igGrid-TopLevelOpts.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="/samples/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 top-level 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="./../../node_modules/zone.js/dist/zone.js?main=browser"></script>
67+
<script src="./../../node_modules/typescript/lib/typescript.js"></script>
68+
<script src="./../../node_modules/reflect-metadata/Reflect.js"></script>
69+
<script src="./../../node_modules/systemjs/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-TopLevelOpts/igGrid-TopLevelOptsTemplate.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div class="row">
2+
<div class="col-md-12">
3+
<ig-grid
4+
[widgetId]='id'
5+
[width]='w'
6+
[autoCommit]='true'
7+
[dataSource]='data'
8+
[height]='h'
9+
[autoGenerateColumns]='false'
10+
[columns]='cols'
11+
></ig-grid>
12+
</div>
13+
</div>

0 commit comments

Comments
 (0)