Skip to content

Commit c6011e9

Browse files
mpavlinovmpavlinov
authored
Merge pull request #206 from dkamburov/master
Add sample demonstrating the usage of igDataSource and test for it
2 parents ca126ce + 68947a3 commit c6011e9

File tree

4 files changed

+195
-0
lines changed

4 files changed

+195
-0
lines changed

‎samples/igDataSource/app.ts‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { Component, NgModule } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
4+
5+
declare var jQuery: any;
6+
7+
@Component({
8+
selector: 'my-app',
9+
templateUrl: `../igDataSource/igDataSourceTemplate.html`,
10+
styles: ['table {border-collapse: collapse;width: 100%;} td {border: 1px solid #ddd; padding: 8px;}']
11+
})
12+
export class AppComponent {
13+
opts: any;
14+
ds: Array<any>;
15+
private source: Infragistics.DataSource;
16+
data: Array<any> = [
17+
{ "Name": "John Smith", "Age": 45 },
18+
{ "Name": "Mary Johnson", "Age": 32 },
19+
{ "Name": "Bob Ferguson", "Age": 27 }
20+
];
21+
constructor() {
22+
console.log("App constructor");
23+
this.opts = {
24+
type: "json",
25+
dataSource: this.data,
26+
callback: jQuery.proxy(this.renderTable, this)
27+
};
28+
this.source = new Infragistics.DataSource(this.opts);
29+
}
30+
renderTable(success, error) {
31+
if (success) {
32+
this.ds = this.source.dataView();
33+
}
34+
}
35+
bind() {
36+
this.source.dataBind();
37+
}
38+
}
39+
40+
@NgModule({
41+
imports: [ BrowserModule ],
42+
declarations: [ AppComponent ],
43+
bootstrap: [ AppComponent ]
44+
})
45+
export class AppModule {}
46+
47+
platformBrowserDynamic().bootstrapModule(AppModule);

‎samples/igDataSource/igDataSource.html‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<html>
2+
<head>
3+
<title>Ignite UI DataSource - Ignite UI integration with Angular</title>
4+
<!-- Ignite UI Required Combined CSS Files -->
5+
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
6+
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet" />
7+
<!-- 1. Load libraries -->
8+
<script src="http://code.jquery.com/jquery-1.12.3.js"></script>
9+
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
10+
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
11+
<!-- IE required polyfills, in this exact order -->
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
13+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
14+
<script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
15+
16+
<script src="https://unpkg.com/[email protected]?main=browser"></script>
17+
<script src="https://unpkg.com/[email protected]/lib/typescript.js"></script>
18+
<script src="https://unpkg.com/[email protected]"></script>
19+
<script src="https://unpkg.com/[email protected]/dist/system.src.js"></script>
20+
<script src="./../../systemjs.config.js"></script>
21+
<!-- Ignite UI Required Combined JavaScript Files -->
22+
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
23+
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
24+
25+
<link rel="stylesheet" href="../sample.css" />
26+
<link type="text/css" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
27+
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" type="text/css" />
28+
29+
<script>
30+
System.import('app.ts')
31+
.then(null, console.error.bind(console));
32+
</script>
33+
</head>
34+
<body class="container">
35+
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
36+
<div class="container">
37+
<div class="navbar-header">
38+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
39+
<span class="sr-only">Toggle navigation</span>
40+
<span class="icon-bar"></span>
41+
<span class="icon-bar"></span>
42+
<span class="icon-bar"></span>
43+
</button>
44+
<a class="navbar-brand" href="/">Ignite UI Angular components </a>
45+
</div>
46+
<div class="navbar-collapse collapse">
47+
<ul class="nav navbar-nav">
48+
<li><a href="/igniteui-angular2/index.html">Home</a></li>
49+
<li><a href="https://github.com/IgniteUI/igniteui-angular2">View on GitHub <i class="fa fa-github"></i></a></li>
50+
</ul>
51+
</div>
52+
</div>
53+
</div>
54+
<div>
55+
<h1 class="push-down-md"><a href="https://www.igniteui.com/data-source/overview" target="_blank">igDataSource</a></h1>
56+
<div class="row description">
57+
<div class="alert alert-info col-md-5 try-it-out">
58+
<span class="h4">TRY IT OUT:</span>
59+
<hr />
60+
<ul>
61+
<li>Click on bind to data button</li>
62+
<li>Review how to initialize a new instance of igDataSource and take full advantage of it inside Angular application</li>
63+
</ul>
64+
</div>
65+
<div class="col-md-4">
66+
<p class="lead">This sample demonstrates how to initialize and use igDataSource inside Angular.</p>
67+
<p>
68+
<a href="https://github.com/IgniteUI/igniteui-angular2/blob/master/samples/igDataSource/igDataSource.html" class="btn btn-default btn-lg btn-primary" target="_blank"><i class="fa fa-code fa-lg"></i> Explore the Code</a>
69+
</p>
70+
</div>
71+
</div>
72+
<div class="row">
73+
<div class="col-md-6">
74+
<my-app>Loading...</my-app>
75+
</div>
76+
</div>
77+
</div>
78+
<footer>
79+
<p>
80+
<a href="/igniteui-angular2/index.html">Home</a> |
81+
<a href="https://github.com/IgniteUI/igniteui-angular2/issues">Feedback &amp; Questions</a> |
82+
<a href="https://github.com/IgniteUI/igniteui-angular2">Clone &amp; Fork</a>
83+
</p>
84+
<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>
85+
</footer>
86+
</body>
87+

‎samples/igDataSource/igDataSourceTemplate.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<button (click)="bind()">bind to data</button>
2+
<br>
3+
<table>
4+
<tr *ngFor="let record of ds">
5+
<td>{{record.Name}}</td>
6+
<td>{{record.Age}}</td>
7+
</tr>
8+
</table>

‎tests/unit/igdatasoure/datasource.spec.ts‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
// modeled after https://github.com/angular/angular/blob/cee2318110eeea115e5f6fc5bfc814cbaa7d90d8/modules/angular2/test/common/directives/ng_for_spec.ts
2+
import { TestBed } from '@angular/core/testing';
3+
import { Component, ViewChild } from '@angular/core';
4+
import * as IG from '../../../src/igniteui.angular2';
5+
6+
export function main() {
7+
describe('Infragistics Angular DataSource', () => {
8+
beforeEach(() => {
9+
TestBed.configureTestingModule({
10+
declarations: [TestComponent]
11+
});
12+
});
13+
14+
it('should initialize correctly', (done) => {
15+
var template = '';
16+
TestBed.overrideComponent(TestComponent, {
17+
set: {
18+
template: template
19+
}
20+
});
21+
TestBed.compileComponents().then(() => {
22+
let fixture = TestBed.createComponent(TestComponent);
23+
expect(fixture.debugElement.componentInstance.source instanceof Infragistics.DataSource)
24+
.toBe(true);
25+
fixture.debugElement.componentInstance.source.dataBind();
26+
expect(fixture.debugElement.componentInstance.source.dataView().length)
27+
.toBe(3);
28+
done();
29+
});
30+
});
31+
});
32+
}
33+
34+
@Component({
35+
selector: 'test-cmp',
36+
template: '<div></div>' //"Component 'TestComponent' must have either 'template' or 'templateUrl' set."
37+
})
38+
class TestComponent {
39+
private source: Infragistics.DataSource;
40+
data: Array<any> = [
41+
{ "Name": "John Smith", "Age": 45 },
42+
{ "Name": "Mary Johnson", "Age": 32 },
43+
{ "Name": "Bob Ferguson", "Age": 27 }
44+
];
45+
constructor() {
46+
let opts = {
47+
type: "json",
48+
dataSource: this.data
49+
};
50+
//this.source = new IgDataSource(this.opts);
51+
this.source = new Infragistics.DataSource(opts);
52+
}
53+
}

0 commit comments

Comments
 (0)