Skip to content

Commit a8c037f

Browse files
dkamburovdkamburov
committed
Add sample with igGrid and WebAPI
1 parent 3d5e456 commit a8c037f

File tree

8 files changed

+394
-10
lines changed

8 files changed

+394
-10
lines changed

‎app/samples.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, Inject, ElementRef, EventEmitter, HostListener} from '@angular/core';
1+
import { Component } from '@angular/core';
22

33
declare var jQuery: any;
44
@Component({

‎index.html‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@
112112
<div class="row">
113113
<div class="col-sm-12 col-lg-5">
114114
<h1>Ignite UI</h1>
115-
<h2>Angular 2 Directives</h2>
115+
<h2>Angular 2 Components</h2>
116116
</div>
117117
<div class="col-sm-12 header-fg col-lg-7"></div>
118118
</div>
@@ -130,21 +130,19 @@ <h2>Live sample...</h2>
130130
<h2>Code...</h2>
131131
<div style="height: 511px; overflow-y: scroll;">
132132
<pre>
133-
import {Component, Inject, ElementRef, EventEmitter, HostListener} from '@angular/core';
134-
import {IgGridComponent} from "../src/igniteui.angular2.ts";
133+
import { Component } from '@angular/core';
135134

136135
declare var jQuery: any;
137136
@Component({
138-
selector: 'my-app',
137+
selector: "my-app",
139138
template: `
140139
&lt;ig-grid
141140
[(options)]=&quot;gridOptions&quot;
142-
[(widgetId)]='id'
141+
[(widgetId)]="id"
143142
(cellClick)=&quot;cellClickHandler($event)&quot;
144-
(rendering)='renderedEventHandler($event)'
143+
(rendering)="renderedEventHandler($event)"
145144
&gt;&lt;/ig-grid&gt;
146-
`,
147-
directives: [IgGridComponent]
145+
`
148146
})
149147
export class AppComponent {
150148
private gridOptions: IgGrid;
@@ -209,6 +207,7 @@ <h2>Samples</h2>
209207
<li><a href="samples/igGrid/igGrid.html">Default</a></li>
210208
<li><a href="samples/igGrid-TopLevelOpts/igGrid-TopLevelOpts.html">Top-level template options</a></li>
211209
<li><a href="samples/igGrid-ComplexOpts/igGrid-ComplexOpts.html">Complex template options</a></li>
210+
<li><a href="samples/igGrid-HTTPClient/igGrid-HTTPClient.html">Grid with HTTP client</a></li>
212211
</ul>
213212
</div>
214213
<a class="btn btn-default" href="samples/igHierarchicalGrid/igHierarchicalGrid.html">igHierarchicalGrid</a>

‎samples/data/product-data.ts‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
import { InMemoryDbService } from 'angular-in-memory-web-api';
2+
export class ProductData implements InMemoryDbService {
3+
createDb() {
4+
let products = [
5+
{
6+
"ProductID": 1,
7+
"ProductName": "Chai",
8+
"DealerName": "A",
9+
"CategoryName": "Beverages",
10+
"ImageUrl": "../../images/samples/nw/categories/1.png",
11+
"InStock": 39,
12+
"Inventory": ""
13+
},
14+
{
15+
"ProductID": 2,
16+
"ProductName": "Chang",
17+
"DealerName": "B",
18+
"CategoryName": "Beverages",
19+
"ImageUrl": "../../images/samples/nw/categories/1.png",
20+
"InStock": 17,
21+
"Inventory": ""
22+
},
23+
{
24+
25+
"ProductID": 3,
26+
"ProductName": "Aniseed Syrup",
27+
"DealerName": "C",
28+
"CategoryName": "Condiments",
29+
"ImageUrl": "../../images/samples/nw/categories/2.png",
30+
"InStock": 13,
31+
"Inventory": ""
32+
},
33+
{
34+
"ProductID": 4,
35+
"ProductName": "Chef Anton\u0027s Cajun Seasoning",
36+
"DealerName": "D",
37+
"CategoryName": "Condiments",
38+
"ImageUrl": "../../images/samples/nw/categories/2.png",
39+
"InStock": 53,
40+
"Inventory": ""
41+
},
42+
{
43+
44+
"ProductID": 5,
45+
"ProductName": "Chef Anton\u0027s Gumbo Mix",
46+
"DealerName": "E",
47+
"CategoryName": "Condiments",
48+
"ImageUrl": "../../images/samples/nw/categories/2.png",
49+
"InStock": 0,
50+
"Inventory": ""
51+
},
52+
{
53+
54+
"ProductID": 6,
55+
"ProductName": "Grandma\u0027s Boysenberry Spread",
56+
"DealerName": "F",
57+
"CategoryName": "Condiments",
58+
"ImageUrl": "../../images/samples/nw/categories/2.png",
59+
"InStock": 120,
60+
"Inventory": ""
61+
},
62+
{
63+
64+
"ProductID": 7,
65+
"ProductName": "Uncle Bob\u0027s Organic Dried Pears",
66+
"DealerName": "G",
67+
"CategoryName": "Produce",
68+
"ImageUrl": "../../images/samples/nw/categories/7.png",
69+
"InStock": 15,
70+
"Inventory": ""
71+
},
72+
{
73+
74+
"ProductID": 8,
75+
"ProductName": "Northwoods Cranberry Sauce",
76+
"DealerName": "H",
77+
"CategoryName": "Condiments",
78+
"ImageUrl": "../../images/samples/nw/categories/2.png",
79+
"InStock": 6,
80+
"Inventory": ""
81+
},
82+
{
83+
84+
"ProductID": 9,
85+
"ProductName": "Mishi Kobe Niku",
86+
"DealerName": "I",
87+
"CategoryName": "Meat/Poultry",
88+
"ImageUrl": "../../images/samples/nw/categories/6.png",
89+
"InStock": 29,
90+
"Inventory": ""
91+
},
92+
{
93+
94+
"ProductID": 10,
95+
"ProductName": "Ikura",
96+
"DealerName": "J",
97+
"CategoryName": "Seafood",
98+
"ImageUrl": "../../images/samples/nw/categories/8.png",
99+
"InStock": 31,
100+
"Inventory": ""
101+
},
102+
{
103+
104+
"ProductID": 11,
105+
"ProductName": "Queso Cabrales",
106+
"DealerName": "K",
107+
"CategoryName": "Dairy Products",
108+
"ImageUrl": "../../images/samples/nw/categories/4.png",
109+
"InStock": 22,
110+
"Inventory": ""
111+
},
112+
{
113+
114+
"ProductID": 12,
115+
"ProductName": "Queso Manchego La Pastora",
116+
"DealerName": "J",
117+
"CategoryName": "Dairy Products",
118+
"ImageUrl": "../../images/samples/nw/categories/4.png",
119+
"InStock": 86,
120+
"Inventory": ""
121+
},
122+
{
123+
124+
"ProductID": 13,
125+
"ProductName": "Konbu",
126+
"DealerName": "K",
127+
"CategoryName": "Seafood",
128+
"ImageUrl": "../../images/samples/nw/categories/8.png",
129+
"InStock": 24,
130+
"Inventory": ""
131+
},
132+
{
133+
134+
"ProductID": 14,
135+
"ProductName": "Tofu",
136+
"DealerName": "L",
137+
"CategoryName": "Produce",
138+
"ImageUrl": "../../images/samples/nw/categories/7.png",
139+
"InStock": 35,
140+
"Inventory": ""
141+
},
142+
{
143+
144+
"ProductID": 15,
145+
"ProductName": "Genen Shouyu",
146+
"DealerName": "M",
147+
"CategoryName": "Condiments",
148+
"ImageUrl": "../../images/samples/nw/categories/2.png",
149+
"InStock": 39,
150+
"Inventory": ""
151+
}
152+
];
153+
return {products};
154+
}
155+
}

‎samples/igGrid-HTTPClient/app.ts‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import { Component, Injectable, NgModule } from '@angular/core';
2+
import { IgGridComponent } from "../../src/igniteui.angular2";
3+
import { Http, Response, HttpModule } from '@angular/http';
4+
import { Headers, RequestOptions } from '@angular/http';
5+
import { BrowserModule } from '@angular/platform-browser';
6+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
7+
import 'rxjs/add/operator/map';
8+
import { Observable } from 'rxjs/Observable';
9+
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
10+
import { ProductData } from '../data/product-data';
11+
12+
declare var jQuery: any;
13+
14+
15+
@Injectable()
16+
export class ProductService {
17+
constructor(private http: Http) { }
18+
19+
getAll() {
20+
let people$ = this.http
21+
.get("app/products").map((res: Response) => res.json());
22+
return people$;
23+
}
24+
25+
addProduct(ProductID, ProductName, DealerName, CategoryName, InStock): Observable<any> {
26+
let body = JSON.stringify({ ProductID, ProductName, DealerName, CategoryName, InStock });
27+
let headers = new Headers({ 'Content-Type': 'application/json' });
28+
let options = new RequestOptions({ headers: headers });
29+
30+
return this.http.post("app/products", body, options)
31+
.map(this.extractData);
32+
}
33+
34+
35+
private extractData(res: Response) {
36+
let body = res.json();
37+
return body.data || { };
38+
}
39+
40+
private handleError (error: any) {
41+
let errMsg = (error.message) ? error.message :
42+
error.status ? `${error.status} - ${error.statusText}` : 'Server error';
43+
console.error(errMsg); // log to console instead
44+
return Observable.throw(errMsg);
45+
}
46+
}
47+
48+
@Component({
49+
selector: 'my-app',
50+
templateUrl: "./igGrid-HTTPClientTemplate.html",
51+
providers: [ProductService]
52+
})
53+
export class AppComponent {
54+
private gridOptions: IgGrid;
55+
private id: string;
56+
private products: any = [];
57+
errorMessage: string;
58+
private newId: number;
59+
60+
constructor(private productService: ProductService) {
61+
this.productService.getAll().subscribe(
62+
res => {
63+
this.products = res.data;
64+
this.newId = this.products.length;
65+
},
66+
error => this.errorMessage = <any>error
67+
);
68+
69+
this.id = 'grid1';
70+
71+
this.gridOptions = {
72+
autoCommit: true,
73+
width: "100%",
74+
height: "400px",
75+
autoGenerateColumns: false,
76+
primaryKey: "ProductID",
77+
columns: [
78+
{ key: "ProductID", headerText: "Product ID", width: "15%", dataType: "number" },
79+
{ key: "ProductName", headerText: "Name", width: "35%", dataType: "string" },
80+
{ key: "DealerName", headerText: "Dealer Name", width: "15%", dataType: "string" },
81+
{ key: "CategoryName", headerText: "CategoryName", width: "25%", dataType: "string" },
82+
{ key: "InStock", headerText: "InStock", width: "15%", dataType: "number" }
83+
],
84+
features: [
85+
{
86+
name: "Updating",
87+
editMode: "none",
88+
enableAddRow: false,
89+
enableDeleteRow: false
90+
}
91+
]
92+
}
93+
}
94+
95+
addProduct(newProductName, newDealerName, newCategoryName, newInStock) {
96+
this.newId++;
97+
this.productService.addProduct(this.newId, newProductName, newDealerName, newCategoryName, newInStock)
98+
.subscribe(
99+
product => this.products.push(product),
100+
error => this.errorMessage = <any>error
101+
);
102+
}
103+
}
104+
105+
@NgModule({
106+
imports: [ BrowserModule, HttpModule, InMemoryWebApiModule.forRoot(ProductData) ],
107+
declarations: [ AppComponent, IgGridComponent ],
108+
bootstrap: [ AppComponent ]
109+
})
110+
export class AppModule {}
111+
112+
platformBrowserDynamic().bootstrapModule(AppModule);

0 commit comments

Comments
 (0)