Test Content
Test Content
');
28 | done();
29 | });
30 | });
31 |
32 | });
33 |
34 | @Component({
35 | selector: 'test-cmp',
36 | template: '' // "Component 'TestComponent' must have either 'template' or 'templateUrl' set."
37 | ,
38 | standalone: false
39 | })
40 | class TestComponent {
41 | private opts: any;
42 |
43 | @ViewChild(Infragistics.IgDialogComponent, {static: true}) public viewChild: Infragistics.IgDialogComponent;
44 |
45 | constructor() {
46 | this.opts = {
47 | headerText : 'Header Text',
48 | height: '500px'
49 | };
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/projects/igniteui-angular-wrappers/src/lib/igdoughnutchart/igdoughnutchart.component.spec.ts:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line max-len
2 | // modeled after https://github.com/angular/angular/blob/cee2318110eeea115e5f6fc5bfc814cbaa7d90d8/modules/Angular/test/common/directives/ng_for_spec.ts
3 | import { TestBed } from '@angular/core/testing';
4 | import { Component, ViewChild } from '@angular/core';
5 | import * as Infragistics from '../../public-api';
6 |
7 | describe('Infragistics Angular DoughnutChart', () => {
8 | beforeEach(() => {
9 | TestBed.configureTestingModule({
10 | declarations: [Infragistics.IgDoughnutChartComponent, TestComponent]
11 | });
12 | });
13 |
14 | it('should initialize correctly', (done) => {
15 | const template = 'Test Content
'
62 | };
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/projects/igniteui-angular-wrappers/src/lib/ignotifier/ignotifier.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ElementRef, IterableDiffers, KeyValueDiffers, ChangeDetectorRef, Renderer2, OnInit } from '@angular/core';
2 | import { IgControlBase } from '../igcontrolbase/igcontrolbase';
3 |
4 | declare var jQuery;
5 |
6 | @Component({
7 | selector: 'ig-notifier',
8 | template: 'Test Content
'
63 | };
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/projects/igniteui-angular-wrappers/src/lib/igqrcodebarcode/igqrcodebarcode.component.spec.ts:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line max-len
2 | // modeled after https://github.com/angular/angular/blob/cee2318110eeea115e5f6fc5bfc814cbaa7d90d8/modules/angular2/test/common/directives/ng_for_spec.ts
3 | import { TestBed } from '@angular/core/testing';
4 | import { Component, ViewChild } from '@angular/core';
5 | import * as Infragistics from '../../public-api';
6 |
7 | describe('Infragistics Angular QRBarCode', () => {
8 |
9 | beforeEach(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [Infragistics.IgQRCodeBarcodeComponent, TestComponent]
12 | });
13 | });
14 |
15 | it('should initialize correctly', (done) => {
16 | const template = '${name}
${text}
Skills:
LinkedIn: http://www.linkedin.com/profile
',
71 | minimizedState: '${name}
2 |
41 |
--------------------------------------------------------------------------------
/src/app/combo/combo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Northwind } from '../shared/northwind';
3 |
4 | @Component({
5 | selector: 'app-combo',
6 | templateUrl: './combo.component.html',
7 | styleUrls: ['./combo.component.css'],
8 | standalone: false
9 | })
10 | export class ComboComponent {
11 |
12 | public options: IgCombo;
13 | public northwind: any;
14 | public combo: any;
15 |
16 | constructor() {
17 | this.northwind = Northwind.getData();
18 | this.options = {
19 | valueKey: 'ProductID',
20 | textKey: 'ProductName',
21 | width: '100%'
22 | };
23 | this.combo = {
24 | value1: 20,
25 | value2: 'Chang'
26 | };
27 | }
28 |
29 | }
30 |
--------------------------------------------------------------------------------
/src/app/data-chart/data-chart.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IgniteUI/igniteui-angular-wrappers/09969ff03e8961160cecb72e8814553160189445/src/app/data-chart/data-chart.component.css
--------------------------------------------------------------------------------
/src/app/data-chart/data-chart.component.html:
--------------------------------------------------------------------------------
1 | igCombo
3 |
4 |
20 |
21 |
5 | TRY IT OUT:
6 |
7 |
13 | 7 |
-
8 |
- Enter a Product ID in the textbox and see how the combos change 9 |
- Change a product's name in the group of textboxes below and see how the names change in each combo 10 | 11 |
14 |
19 | This sample demonstrates how to use Angular Components to create igCombos.
15 | 18 |
22 |
39 |
40 |
23 |
24 |
26 | values: 1 - 20
25 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | 41 |
Edit Product Name
42 |
43 |
44 |
49 |
45 |
46 |
47 |
48 | igChart & igZoombar
2 |
3 |
18 |
4 | TRY IT OUT:
5 |
6 |
11 | 6 |
-
7 |
- Scroll the chart with the scroll bar 8 |
- Change the viewable area of the chart by dragging the handles inside the zoombar 9 |
12 |
17 | This sample demonstrates how to link together the igDataChart and igZoomBar using Ignite UI Angular Wrappers components.
13 |14 | Explore the Code 15 |
16 |
19 |
--------------------------------------------------------------------------------
/src/app/data-chart/data-chart.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-data-chart',
5 | templateUrl: './data-chart.component.html',
6 | styleUrls: ['./data-chart.component.css'],
7 | standalone: false
8 | })
9 | export class DataChartComponent {
10 |
11 | public data: any;
12 | public options: any;
13 | public zoombarOptions: any;
14 |
15 | constructor() {
16 | // eslint-disable-next-line max-len
17 | this.data = [{ CountryName: 'China', Pop1995: 1216, Pop2005: 1297, Pop2015: 1361, Pop2025: 1394 }, { CountryName: 'India', Pop1995: 920, Pop2005: 1090, Pop2015: 1251, Pop2025: 1396 }, { CountryName: 'United States', Pop1995: 266, Pop2005: 295, Pop2015: 322, Pop2025: 351 }, { CountryName: 'Indonesia', Pop1995: 197, Pop2005: 229, Pop2015: 256, Pop2025: 277 }, { CountryName: 'Brazil', Pop1995: 161, Pop2005: 186, Pop2015: 204, Pop2025: 218 }];
18 |
19 | this.options = {
20 | dataSource: this.data,
21 | axes: [{
22 | name: 'NameAxis',
23 | type: 'categoryX',
24 | title: 'Country',
25 | label: 'CountryName'
26 | },
27 | {
28 | name: 'PopulationAxis',
29 | type: 'numericY',
30 | minimumvalue: 0,
31 | title: 'Milions of People'
32 | }],
33 | series: [{
34 | name: '2015Population',
35 | type: 'column',
36 | isHighlightingEnabled: true,
37 | isTransitionInEnabled: true,
38 | xAxis: 'NameAxis',
39 | yAxis: 'PopulationAxis',
40 | valueMemberPath: 'Pop2015'
41 | }]
42 | };
43 |
44 | this.zoombarOptions = {
45 | target: '#datachart1'
46 | };
47 | }
48 |
49 | changeZB() {
50 | let opts = {};
51 |
52 | opts = {
53 | target: '#datachart1',
54 | clone: {
55 | dataSource: this.data,
56 | gridMode: 'none',
57 | axes: [{
58 | name: 'NameAxis',
59 | type: 'categoryX',
60 | labelVisibility: 'collapsed'
61 | },
62 | {
63 | name: 'PopulationAxis',
64 | type: 'numericY',
65 | labelVisibility: 'collapsed'
66 | }],
67 | series: [{
68 | name: '2015Population',
69 | type: 'line',
70 | xAxis: 'NameAxis',
71 | yAxis: 'PopulationAxis',
72 | valueMemberPath: 'Pop2015'
73 | }]
74 | }
75 | };
76 | this.zoombarOptions = opts;
77 | }
78 |
79 | }
80 |
--------------------------------------------------------------------------------
/src/app/dialog/dialog.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IgniteUI/igniteui-angular-wrappers/09969ff03e8961160cecb72e8814553160189445/src/app/dialog/dialog.component.css
--------------------------------------------------------------------------------
/src/app/dialog/dialog.component.html:
--------------------------------------------------------------------------------
1 |
20 |
23 | 24 |
25 | 23 | 24 |
igDialog
2 |
3 |
17 |
4 | TRY IT OUT:
5 |
6 |
11 | 6 |
-
7 |
- Drag the dialog around the page by the header 8 |
- Close the dialog and refresh the page to see it reappear 9 |
12 |
16 | This sample demonstrates how to declare an igDialog with an Ignite UI Angular Wrappers component.
13 |Explore the Code 14 |
15 |
18 |
--------------------------------------------------------------------------------
/src/app/dialog/dialog.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-dialog',
5 | templateUrl: './dialog.component.html',
6 | styleUrls: ['./dialog.component.css'],
7 | standalone: false
8 | })
9 | export class DialogComponent {
10 |
11 | public options: any;
12 |
13 | constructor() {
14 | this.options = {
15 | headerText: 'Foo',
16 | height: '325px'
17 | };
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/editors/editors.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IgniteUI/igniteui-angular-wrappers/09969ff03e8961160cecb72e8814553160189445/src/app/editors/editors.component.css
--------------------------------------------------------------------------------
/src/app/editors/editors.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-editors',
5 | templateUrl: './editors.component.html',
6 | styleUrls: ['./editors.component.css'],
7 | standalone: false
8 | })
9 | export class EditorsComponent {
10 |
11 | public editors: any;
12 |
13 | constructor() {
14 | this.editors = {
15 | currency: 12.1,
16 | date: new Date(),
17 | editor: 'Infragistics',
18 | mask: '134-134-134',
19 | numeric: 123,
20 | percent: 0.12,
21 | text: 'Ignite UI'
22 | };
23 | }
24 |
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/grid-api-methods/grid-api-methods.component.css:
--------------------------------------------------------------------------------
1 | fieldset.explorer {
2 | float: left;
3 | width: 45%;
4 | }
5 | fieldset {
6 | border: none;
7 | margin: 1em;
8 | }
9 | fieldset legend {
10 | color: #5F6564;
11 | font-family: 'Open Sans',sans-serif;
12 | font-size: 16px;
13 | font-weight: 300;
14 | }
15 | fieldset label {
16 | display: block;
17 | margin: 0.5em 0;
18 | font-size: 12px;
19 | color: #666;
20 | }
--------------------------------------------------------------------------------
/src/app/grid-complex-options/grid-complex-options.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IgniteUI/igniteui-angular-wrappers/09969ff03e8961160cecb72e8814553160189445/src/app/grid-complex-options/grid-complex-options.component.css
--------------------------------------------------------------------------------
/src/app/grid-complex-options/grid-complex-options.component.html:
--------------------------------------------------------------------------------
1 |
19 |
20 |
25 |
26 |
21 | 
22 |
igGrid
2 | 3 |
4 |
12 |
13 |
5 |
11 | This sample demonstrates how Ignite UI Angular Wrappers components are used to initialize the 6 | igGrid complex options though the template.
7 | 10 |
14 |
--------------------------------------------------------------------------------
/src/app/grid-complex-options/grid-complex-options.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Northwind } from '../shared/northwind';
3 |
4 | @Component({
5 | selector: 'app-grid-complex-options',
6 | templateUrl: './grid-complex-options.component.html',
7 | styleUrls: ['./grid-complex-options.component.css'],
8 | standalone: false
9 | })
10 | export class GridComplexOptionsComponent {
11 |
12 | public cols: Array
15 |
17 |
19 |
20 |
24 |
26 |
27 |
28 |
29 | 30 | 33 |
34 | {{idHeaderText}} 36 |
37 |
38 | 29 | 30 | 33 |
34 | {{idHeaderText}} 36 |
igGrid
2 |
3 |
17 |
18 |
4 | TRY IT OUT:
5 |
6 |
12 | 6 |
-
7 |
- Add a new product either through the grid's UI or the form on the right of the grid 8 |
- Change a product's name in the group of textboxes below and see how the names change in the grid 9 |
- Delete a product either through the grid's UI or with the button next to each product in the table under the grid 10 |
13 |
16 | This sample demonstrates how Ignite UI Angular Wrappers components are used with the igGrid to allow for two-way binding in the grid.
14 | 15 |
19 |
33 |
34 |
20 |
22 |
23 |
32 | Add Product
24 |
25 |
26 |
28 |
29 |
30 |
31 | 35 |
| Product ID | 39 |Name | 40 |Quantity per unit | 41 |Unit Price | 42 |43 | |
|---|---|---|---|---|
| {{product.ProductID}} | 48 |49 | | {{product.QuantityPerUnit}} | 50 |51 | | 52 | | 53 |
2 |
75 |
76 |
77 |
--------------------------------------------------------------------------------
/src/app/grid-excel-exporting/grid-excel-exporting.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IgniteUI/igniteui-angular-wrappers/09969ff03e8961160cecb72e8814553160189445/src/app/grid-excel-exporting/grid-excel-exporting.component.css
--------------------------------------------------------------------------------
/src/app/grid-excel-exporting/grid-excel-exporting.component.html:
--------------------------------------------------------------------------------
1 |
3 |
6 | Live sample...
4 |
7 |
74 | Code...
8 |
9 |
73 |
10 | import {{ '{' }} Component {{ '}' }} from '@angular/core';
11 |
12 | declare var jQuery: any;
13 | @Component({{ '{' }}
14 | selector: "my-app",
15 | template: `
16 | <ig-grid
17 | [(options)]="gridOptions"
18 | [(widgetId)]="id"
19 | (cellClick)="cellClickHandler($event)"
20 | (rendering)="renderedEventHandler($event)"
21 | ></ig-grid>
22 | `
23 | {{ '}' }})
24 | export class AppComponent {{ '{' }}
25 | private gridOptions: IgGrid;
26 | private cellClickHandler: any;
27 | private renderedEventHandler:any;
28 | private data: Array<any>;
29 | private id: string = "grid1";
30 |
31 | constructor() {{ '{' }}
32 | this.data = [/* data omitted */];
33 |
34 | this.cellClickHandler= function(ui){{ '{' }}
35 | console.log("grid cell click event fired");
36 | {{ '}' }};
37 |
38 | this.renderedEventHandler= function(ui){{ '{' }}
39 | console.log("grid rendered event fired");
40 | {{ '}' }};
41 |
42 | this.gridOptions = {{ '{' }}
43 | dataSource: this.data,
44 | width: "100%",
45 | primaryKey: "ProductID",
46 | autoCommit: true,
47 | autoGenerateColumns: false,
48 | columns: [
49 | {{ '{' }} "headerText": "Product ID", "key": "ProductID", "dataType": "number", "width": "10%" {{ '}' }},
50 | {{ '{' }} "headerText": "Name", "key": "ProductName", "dataType": "string", "width": "40%" {{ '}' }},
51 | {{ '{' }} "headerText": "Quantity per unit", "key": "QuantityPerUnit", "dataType": "string", "width": "25%" {{ '}' }},
52 | {{ '{' }} "headerText": "Unit Price", "key": "UnitPrice", "dataType": "string", "width": "25%" {{ '}' }}
53 | ],
54 | features: [{{ '{' }}
55 | name: "Updating",
56 | columnSettings: [{{ '{' }}
57 | columnKey: "ProductID",
58 | readOnly: true
59 | {{ '}' }}]
60 | {{ '}' }}, {{ '{' }}
61 | name: "Paging",
62 | pageSize: 10
63 | {{ '}' }}, {{ '{' }}
64 | name: "Filtering"
65 | {{ '}' }}, {{ '{' }}
66 | name: "Sorting"
67 | {{ '}' }}]
68 | {{ '}' }};
69 | {{ '}' }}
70 | {{ '}' }}
71 |
72 | 2 | igGrid - Excel Exporting 3 |
4 | 5 |
6 |
26 |
27 |
7 | This sample shows how easy it is to export the Infragistics Ignite UI data grid to Excel. TRY IT OUT:
8 |
9 |
17 | 9 |
-
10 |
- Edit a cell 11 |
- Sort a column 12 |
- Add a new row 13 |
- Remove a row 14 |
- Click the Export button to export the grid in Excel table 15 |
18 |
25 | This sample demonstrates how Ignite UI Angular Wrappers components are used with the igGrid to allow exporting to Excel
19 |20 | 22 | Explore the Code 23 |
24 |
28 |
--------------------------------------------------------------------------------
/src/app/grid-excel-exporting/grid-excel-exporting.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Northwind } from '../shared/northwind';
3 |
4 | declare var jQuery: any;
5 |
6 | @Component({
7 | selector: 'app-grid-excel-exporting',
8 | templateUrl: './grid-excel-exporting.component.html',
9 | styleUrls: ['./grid-excel-exporting.component.css'],
10 | standalone: false
11 | })
12 | export class GridExcelExportingComponent {
13 |
14 | public gridOptions: IgGrid;
15 | public id: string;
16 | public data: any;
17 |
18 | constructor() {
19 | this.data = Northwind.getData();
20 |
21 | this.id = 'grid1';
22 |
23 | this.gridOptions = {
24 | autoCommit: true,
25 | width: '100%',
26 | height: '400px',
27 | autoGenerateColumns: false,
28 | columns: [
29 | {
30 | key: 'ProductID',
31 | headerText: 'Product ID',
32 | width: '50px',
33 | dataType: 'number'
34 | },
35 | {
36 | key: 'ProductName',
37 | headerText: 'Name',
38 | width: '350px',
39 | dataType: 'string'
40 | },
41 | {
42 | key: 'QuantityPerUnit',
43 | headerText: 'Quantity per unit',
44 | width: '250px',
45 | dataType: 'string'
46 | },
47 | {
48 | key: 'UnitPrice',
49 | headerText: 'Unit Price',
50 | width: '100px',
51 | dataType: 'number',
52 | template: jQuery('#colTmpl').html()
53 | }
54 | ],
55 | primaryKey: 'ProductID',
56 | features: [
57 | {
58 | name: 'Updating',
59 | columnSettings: [{ columnKey: 'ProductID', readOnly: true }]
60 | },
61 | {
62 | name: 'Sorting'
63 | }
64 | ]
65 | };
66 | }
67 |
68 | public exportExcelGrid() {
69 | jQuery.ig.GridExcelExporter.exportGrid($('#grid1'), {
70 | fileName: 'igGrid',
71 | gridStyling: $('#styling').igCheckboxEditor('value') ? 'applied' : 'none',
72 | gridFeatureOptions: {
73 | sorting: $('#sorting').igCheckboxEditor('value') ? 'applied' : 'none'
74 | }
75 | });
76 | }
77 |
78 | }
79 |
--------------------------------------------------------------------------------
/src/app/grid-http-client/grid-http-client.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IgniteUI/igniteui-angular-wrappers/09969ff03e8961160cecb72e8814553160189445/src/app/grid-http-client/grid-http-client.component.css
--------------------------------------------------------------------------------
/src/app/grid-http-client/grid-http-client.component.html:
--------------------------------------------------------------------------------
1 |
29 |
31 | 32 |
33 | 31 | 32 |
igGrid
2 | 3 |
4 |
16 |
17 |
5 |
15 | 6 | This sample demonstrates how to configure IgGrid Component to talk to remote server. It is based on the HTTP Client demo with Observables. 7 | It is using in-memory web API simulator, to avoid the hassle in creating web API server. 8 | There is also an ability to create new products and send them to the backend. 9 |
10 |11 | The grid is created when bound to an empty data source and then using a service to populate the data. 12 |
13 | 14 |19 | 20 |
21 |
41 |
42 |
22 |
35 | ProductName:
23 |
24 |
25 | DealerName:
26 |
27 |
28 | CategoryName:
29 |
30 |
31 | InStock:
32 |
33 |
34 |
36 |
40 |
37 |
38 |
39 | {{errorMessage}}
--------------------------------------------------------------------------------
/src/app/grid-http-client/grid-http-client.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Product } from './product';
3 | import { ProductService } from './product.service';
4 |
5 | @Component({
6 | selector: 'app-grid-http-client',
7 | templateUrl: './grid-http-client.component.html',
8 | styleUrls: ['./grid-http-client.component.css'],
9 | standalone: false
10 | })
11 | export class GridHttpClientComponent {
12 |
13 | public gridOptions: IgGrid;
14 | public id: string;
15 | public products: Product[] = [];
16 | errorMessage: string;
17 | public newId: number;
18 |
19 | constructor(private productService: ProductService) {
20 | this.productService.getAll().subscribe(
21 | res => {
22 | this.products = res;
23 | this.newId = this.products.length;
24 | },
25 | error => this.errorMessage = error as any
26 | );
27 |
28 | this.id = 'grid1';
29 |
30 | this.gridOptions = {
31 | autoCommit: true,
32 | width: '100%',
33 | height: '400px',
34 | autoGenerateColumns: false,
35 | primaryKey: 'id',
36 | columns: [
37 | { key: 'id', headerText: 'Product ID', width: '15%', dataType: 'number' },
38 | { key: 'ProductName', headerText: 'Name', width: '35%', dataType: 'string' },
39 | { key: 'DealerName', headerText: 'Dealer Name', width: '15%', dataType: 'string' },
40 | { key: 'CategoryName', headerText: 'CategoryName', width: '25%', dataType: 'string' },
41 | { key: 'InStock', headerText: 'InStock', width: '15%', dataType: 'number' }
42 | ],
43 | features: [
44 | {
45 | name: 'Updating',
46 | editMode: 'none',
47 | enableAddRow: false,
48 | enableDeleteRow: false
49 | }
50 | ]
51 | };
52 | }
53 |
54 | addProduct(newProductName, newDealerName, newCategoryName, newInStock) {
55 | this.newId++;
56 | this.productService.addProduct(this.newId, newProductName, newDealerName, newCategoryName, newInStock)
57 | .subscribe(product => this.products.push(product));
58 | }
59 |
60 | }
61 |
--------------------------------------------------------------------------------
/src/app/grid-http-client/product.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { HttpClient, HttpHeaders } from '@angular/common/http';
3 | import { Observable } from 'rxjs';
4 | import { Product } from './product';
5 |
6 | @Injectable({
7 | providedIn: 'root'
8 | })
9 | export class ProductService {
10 | constructor(private http: HttpClient) { }
11 |
12 | getAll(): Observable
2 |
--------------------------------------------------------------------------------
/src/app/grid-top-level-options/grid-top-level-options.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Northwind } from '../shared/northwind';
3 |
4 | @Component({
5 | selector: 'app-grid-top-level-options',
6 | templateUrl: './grid-top-level-options.component.html',
7 | styleUrls: ['./grid-top-level-options.component.css'],
8 | standalone: false
9 | })
10 | export class GridTopLevelOptionsComponent {
11 |
12 | public cols: ArrayigGrid
3 | 4 |
5 |
13 |
14 |
6 |
12 | This sample demonstrates how Ignite UI Angular Wrappers components are used to initialize 7 | the igGrid top-level options though the template.
8 | 11 |
15 |
20 |
21 |
22 |
16 |
19 | igHierarchicalGrid
2 |
3 |
8 |
9 |
4 |
7 | This sample demonstrates how Ignite UI Angular Wrappers components are used to instantiate igHierarchicalGrid.
5 | 6 |
10 |
--------------------------------------------------------------------------------
/src/app/hierarchical-grid/hierarchical-grid.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { NorthwindEmployees } from '../shared/northwind-emplyoees';
3 |
4 | @Component({
5 | selector: 'app-hierarchical-grid',
6 | templateUrl: './hierarchical-grid.component.html',
7 | styleUrls: ['./hierarchical-grid.component.css'],
8 | standalone: false
9 | })
10 | export class HierarchicalGridComponent {
11 |
12 | public hgridOptions: IgHierarchicalGrid;
13 | public id: string;
14 | public data: any;
15 | public newProduct: any;
16 |
17 | constructor() {
18 | this.data = NorthwindEmployees.getData();
19 |
20 | this.id = 'hgrid1';
21 |
22 | this.hgridOptions = {
23 | autoCommit: true,
24 | dataSource: this.data,
25 | width: '100%',
26 | height: '400px',
27 | autoGenerateColumns: false,
28 | autoGenerateColumnLayouts: false,
29 | columns: [
30 | { key: 'FirstName', headerText: 'First Name', width: '25%', dataType: 'string' },
31 | { key: 'LastName', headerText: 'Last Name', width: '25%', dataType: 'string' },
32 | { key: 'Title', headerText: 'Title', width: '25%', dataType: 'string' },
33 | { key: 'BirthDate', headerText: 'Birth Date', width: '25%', dataType: 'date' }
34 | ],
35 | columnLayouts: [
36 | {
37 | key: 'Orders',
38 | responseDataKey: 'results',
39 | primaryKey: 'OrderID',
40 | autoGenerateColumns: false,
41 | width: '100%',
42 | columns: [
43 | { key: 'OrderID', headerText: 'OrderID', width: '25%', dataType: 'string' },
44 | { key: 'Freight', headerText: 'Freight', width: '25%', dataType: 'string' },
45 | { key: 'ShipName', headerText: 'ShipName', width: '25%', dataType: 'string' },
46 | { key: 'ShipAddress', headerText: 'ShipAddress', width: '25%', dataType: 'string' }
47 | ],
48 | features: [
49 | {
50 | name: 'Paging',
51 | pageSize: '10'
52 | }
53 | ]
54 | }
55 | ]
56 | };
57 | }
58 |
59 | }
60 |
--------------------------------------------------------------------------------
/src/app/html-editor/html-editor.component.css:
--------------------------------------------------------------------------------
1 | textarea {
2 | width: 100%;
3 | height: 400px;
4 | }
--------------------------------------------------------------------------------
/src/app/html-editor/html-editor.component.html:
--------------------------------------------------------------------------------
1 |
11 |
14 |
15 |
16 |
17 | igHtmlEditor
2 |
3 |
16 |
4 | TRY IT OUT:
5 |
6 |
10 | 6 |
-
7 |
- Change the content in the TEXTAREA on the right to see igHtmlEditor on the left updated and vice versa 8 |
11 |
15 | This sample demonstrates how Ignite UI Angular Wrappers components are used with the igHtmlEditor to allow for two-way binding.
12 | 14 |
17 |
--------------------------------------------------------------------------------
/src/app/html-editor/html-editor.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-html-editor',
5 | templateUrl: './html-editor.component.html',
6 | styleUrls: ['./html-editor.component.css'],
7 | standalone: false
8 | })
9 | export class HtmlEditorComponent {
10 |
11 | public options: any;
12 | public data: any;
13 |
14 | constructor() {
15 | this.data = '
18 |
19 |
20 |
21 |
22 |
23 |
24 | Ignite UI controls:
- igEditors
- igHtmlEditor
- igGrid
- igDataChart
- etc.
igMap
2 |
3 |
18 |
4 | TRY IT OUT:
5 |
6 |
11 | 6 |
-
7 |
- Use the mouse wheel to zoom in on the map 8 |
- Click and drag or use the arrow keys to pan the map 9 |
12 |
17 | This sample demonstrates how create an igMap using an Ignite UI Angular Wrappers component.
13 | 16 |igPivotGrid
2 | 3 |
4 |
9 |
10 |
5 |
8 | This sample demonstrates how Angular components are used to instantiate igPivotGrid.
6 | 7 |
11 |
--------------------------------------------------------------------------------
/src/app/pivot-grid-xmla-data-source/pivot-grid-xmla-data-source.component.css:
--------------------------------------------------------------------------------
1 | :host /deep/ #dataSelector, #pivotGrid {
2 | float: left;
3 | }
4 |
5 | :host /deep/ #pivotGrid_container {
6 | float: right;
7 | width: 70%;
8 | }
--------------------------------------------------------------------------------
/src/app/pivot-grid-xmla-data-source/pivot-grid-xmla-data-source.component.html:
--------------------------------------------------------------------------------
1 |
12 |
13 |
14 |
15 |
16 |
17 | igPivotGrid
2 | 3 |
4 |
9 |
10 |
5 |
8 | This sample demonstrates how Angular Components are used with the igPivotGrid and Olap Xmla Data Source.
6 | 7 |
11 |
--------------------------------------------------------------------------------
/src/app/pivot-grid-xmla-data-source/pivot-grid-xmla-data-source.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-pivot-grid-xmla-data-source',
5 | templateUrl: './pivot-grid-xmla-data-source.component.html',
6 | styleUrls: ['./pivot-grid-xmla-data-source.component.css'],
7 | standalone: false
8 | })
9 | export class PivotGridXmlaDataSourceComponent {
10 |
11 | public optsGrid: IgPivotGrid;
12 | public optsSelector: IgPivotDataSelector;
13 | public selectorId: string;
14 | public gridId: string;
15 | public data: any;
16 |
17 | constructor() {
18 | this.data = new jQuery.ig.OlapXmlaDataSource({
19 | serverUrl: 'http://sampledata.infragistics.com/olap/msmdpump.dll',
20 | catalog: 'Adventure Works DW Standard Edition',
21 | cube: 'Adventure Works',
22 | rows: '[Ship Date].[Calendar]',
23 | columns: '[Delivery Date].[Calendar]',
24 | measures: '[Measures].[Product Gross Profit Margin Status],[Measures].[Product Gross Profit Margin Goal]',
25 | });
26 |
27 | this.selectorId = 'dataSelector';
28 | this.gridId = 'pivotGrid';
29 |
30 | this.optsGrid = {
31 | dataSource: this.data,
32 | height: '650px'
33 | };
34 |
35 | this.optsSelector = {
36 | dataSource: this.data,
37 | height: '650px',
38 | width: '30%'
39 | };
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/app/shared/candidates.ts:
--------------------------------------------------------------------------------
1 | export module candidates {
2 | export function getData() {
3 | return [
4 | {name: 'Douglas Crockford', text: 'Douglas Crockford is an American computer programmer and entrepreneur who is best known for his ongoing involvement in the development of the JavaScript language, for having popularized the data format JSON (JavaScript Object Notation), and for developing various JavaScript related tools such as JSLint and JSMin. He is currently a senior JavaScript architect at PayPal, and is also a writer and speaker on JavaScript, JSON, and related web technologies such as the Yahoo! User Interface Library (YUI).', skills: [
5 | {description: 'JavaScript'},
6 | {description: 'JSON'},
7 | {description: 'HTML'},
8 | {description: 'JSLint'}
9 | ], picture: 'http://www.igniteui.com/images/samples/tile-manager/450px-Douglas_Crockford.jpg', linkedin: 'http://www.linkedin.com/groups?gid=3165057&trk=group-name'
10 | },
11 | {name: 'John Resig', text: 'John Resig is the Dean of Computer Science at Khan Academy and the creator of the jQuery JavaScript library. He\'s also the author of the books Pro JavaScript Techniques and Secrets of the JavaScript Ninja. Currently, John is located in Brooklyn, NY and enjoys studying Ukiyo-e (Japanese Woodblock Printing) in his spare time.', skills: [
12 | {description: 'JavaScript'},
13 | {description: 'JSON'},
14 | {description: 'HTML'},
15 | {description: 'jQuery'}
16 | ], picture: 'http://www.igniteui.com/images/samples/tile-manager/3450728563_69b0bd0743_m.jpg', linkedin: 'http://www.linkedin.com/groups?viewMembers=&gid=100943&sik=1360507269893&goback=%2Eanp_100943_1360507269892_1'
17 | },
18 | {name: 'Bill Gates', text: 'William Henry "Bill" Gates III (born October 28, 1955) is an American programmer, inventor, business magnate and philanthropist. Gates is the former chief executive and current chairman of Microsoft, the world\'s largest personal-computer software company, which he co-founded with Paul Allen. He is consistently ranked among the world\'s wealthiest people and was the wealthiest overall from 1995 to 2009, excluding 2008, when he was ranked third; in 2011 he was the wealthiest American and the second wealthiest person. During his career at Microsoft, Gates held the positions of CEO and chief software architect, and remains the largest individual shareholder, with 6.4 percent of the common stock. He has also authored and co-authored several books.', skills: [
19 | {description: 'Entrepreneurship'},
20 | {description: 'VB'},
21 | {description: 'Operating Systems'},
22 | {description: 'Programming Languages'}
23 | ], picture: 'http://www.igniteui.com/images/samples/tile-manager/220px-BillGates2012.jpg', linkedin: 'http://www.linkedin.com/company/8736?trk=tyah'
24 | },
25 | {
26 | name: 'Jon Skeet', text: 'Author of C# in Depth. Currently a software engineer at Google, London. Usually a Microsoft MVP (C#, 2003-2010, 2011-)', skills: [
27 | { description: 'C#' },
28 | { description: '.NET' },
29 | { description: 'Java' }
30 | ], picture: 'http://www.igniteui.com/images/samples/tile-manager/jonskeet.jpg', linkedin: 'uk.linkedin.com/pub/jon-skeet/0/800/ba3'
31 | }
32 | ];
33 | }
34 | };
--------------------------------------------------------------------------------
/src/app/shared/tasks.ts:
--------------------------------------------------------------------------------
1 | export module Tasks {
2 | export function getData() {
3 | return [
4 | {
5 | "id": 0, "tasks": "Project Plan", "start": "6/2/2014", "finish": "8/22/2014", "duration": "60d", "progress": "32%", "products": [
6 | { "id": 1, "tasks": "Planning", "start": "6/2/2014", "finish": "6/4/2014", "duration": "3d", "progress": "100%" },
7 | { "id": 2, "tasks": "Write a specification", "start": "6/5/2014", "finish": "6/6/2014", "duration": "2d", "progress": "100%" },
8 | { "id": 3, "tasks": "Create a demo application", "start": "6/9/2014", "finish": "6/11/2014", "duration": "3d", "progress": "100%" },
9 | { "id": 4, "tasks": "Collect a feedback", "start": "6/12/2014", "finish": "6/12/2014", "duration": "1d", "progress": "100%" },
10 | {
11 | "id": 5, "tasks": "Design", "start": "6/13/2014", "finish": "6/19/2014", "duration": "5d", "progress": "60%", "products": [
12 | { "id": 8, "tasks": "Conceptual Design", "start": "6/13/2014", "finish": "6/16/2014", "duration": "2d", "progress": "100%" },
13 | { "id": 9, "tasks": "Preliminary Design", "start": "6/17/2014", "finish": "6/18/2014", "duration": "2d", "progress": "65%" },
14 | { "id": 10, "tasks": "Final Design", "start": "6/19/2014", "finish": "6/19/2014", "duration": "1d", "progress": "15%" }
15 | ]
16 | },
17 | {
18 | "id": 6, "tasks": "Development", "start": "6/20/2014", "finish": "8/20/2014", "duration": "44d", "progress": "5%", "products": [
19 | { "id": 11, "tasks": "Implementation", "start": "6/20/2014", "finish": "7/17/2014", "duration": "20d", "progress": "5%" },
20 | { "id": 12, "tasks": "Testing", "start": "7/18/2014", "finish": "7/31/2014", "duration": "10d", "progress": "0%" },
21 | { "id": 13, "tasks": "Bug fixing", "start": "8/1/2014", "finish": "8/14/2014", "duration": "10d", "progress": "0%" },
22 | { "id": 14, "tasks": "Documenting", "start": "8/15/2014", "finish": "8/20/2014", "duration": "4d", "progress": "0%" }
23 | ]
24 | },
25 | { "id": 7, "tasks": "Project Complete", "start": "8/21/2014", "finish": "8/22/2014", "duration": "2d", "progress": "0%" }
26 | ]
27 | }
28 | ];
29 | }
30 | };
--------------------------------------------------------------------------------
/src/app/tile-manager/tile-manager.component.css:
--------------------------------------------------------------------------------
1 | :host /deep/ #dashboard {
2 | position: relative;
3 | width: 100%;
4 | height: 550px;
5 | }
6 |
7 | :host /deep/ #dashboard h4 {
8 | font-size: 18px;
9 | text-align: center;
10 | }
11 |
12 | :host /deep/ #dashboard h3 {
13 | text-align: center;
14 | }
15 |
16 | :host /deep/ #dashboard img {
17 | width: 150px;
18 | height: 175px;
19 | margin-left: -75px;
20 | margin-top: 15px;
21 | position: absolute;
22 | left: 50%;
23 | }
24 |
25 | :host /deep/ #dashboard .ui-igtile-maximized img {
26 | width: 200px;
27 | height: 250px;
28 | position: static;
29 | float: left;
30 | margin: 20px 20px 20px 0;
31 | }
32 |
33 | :host /deep/ #dashboard .ui-igtilemanager-right img {
34 | width: 60px;
35 | height: 80px;
36 | margin-left: -30px;
37 | margin-top: 15px;
38 | }
39 |
40 | :host /deep/ .ui-igtile-maximized .text {
41 | margin-top: 20px;
42 | margin-bottom: 20px;
43 | }
44 |
45 | :host /deep/ .ui-igtile-maximized div {
46 | text-align: left;
47 | }
48 |
49 | :host /deep/ .linkedIn,
50 | :host /deep/ .skills {
51 | word-wrap: break-word;
52 | }
53 |
54 | :host /deep/ div.ui-igtile-inner-container h4 {
55 | margin-bottom: 0.1em;
56 | }
--------------------------------------------------------------------------------
/src/app/tile-manager/tile-manager.component.html:
--------------------------------------------------------------------------------
1 |
12 |
13 |
14 |
15 |
16 |
17 | igTileManager
2 | 3 |
4 |
10 |
5 |
9 | This sample demonstrates how Ignite UI Angular Wrappers components are used to instantiate igTileManager.
6 | 8 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/app/tile-manager/tile-manager.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { candidates } from '../shared/candidates';
3 |
4 | @Component({
5 | selector: 'app-tile-manager',
6 | templateUrl: './tile-manager.component.html',
7 | styleUrls: ['./tile-manager.component.css'],
8 | standalone: false
9 | })
10 | export class TileManagerComponent {
11 | public options: any;
12 |
13 | constructor() {
14 | this.options = {
15 | dataSource: candidates.getData(),
16 | marginLeft: 10,
17 | marginTop: 10,
18 | rightPanelTilesWidth: 200,
19 | rightPanelTilesHeight: 156,
20 | maximizedState: '${name}
${text}
Skills:
LinkedIn: http://www.linkedin.com/profile
',
21 | minimizedState: '${name}
igTreeGrid
2 | 3 |
4 |
9 |
5 |
8 | This sample demonstrates how Ignite UI Angular Wrappers directives are used with the igTreeGrid.
6 | 7 |
10 |
--------------------------------------------------------------------------------
/src/app/tree-grid/tree-grid.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Tasks } from '../shared/tasks';
3 |
4 | @Component({
5 | selector: 'app-tree-grid',
6 | templateUrl: './tree-grid.component.html',
7 | styleUrls: ['./tree-grid.component.css'],
8 | standalone: false
9 | })
10 | export class TreeGridComponent {
11 |
12 | public tgridOptions: IgTreeGrid;
13 | public id: string;
14 | public data: any;
15 | public newProduct: any;
16 |
17 | constructor() {
18 | this.data = Tasks.getData();
19 |
20 | this.id = 'tgrid1';
21 |
22 | this.tgridOptions = {
23 | autoCommit: true,
24 | dataSource: this.data,
25 | width: '100%',
26 | height: '400px',
27 | autoGenerateColumns: false,
28 | autoGenerateColumnLayouts: false,
29 | primaryKey: 'id',
30 | childDataKey: 'products',
31 | renderExpansionIndicatorColumn: true,
32 | columns: [
33 | { key: 'id', headerText: 'ID', width: '100px', dataType: 'number' },
34 | { key: 'tasks', headerText: 'Task', width: '250px', dataType: 'string' },
35 | { key: 'start', headerText: 'Start', width: '100px', dataType: 'date' },
36 | { key: 'finish', headerText: 'Finish', width: '100px', dataType: 'date' },
37 | { key: 'duration', headerText: 'Duration', width: '100px', dataType: 'date' },
38 | { key: 'progress', headerText: 'Progress', width: '100px', dataType: 'date' }
39 | ]
40 | };
41 | }
42 |
43 | }
44 |
--------------------------------------------------------------------------------
/src/app/tree/tree.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IgniteUI/igniteui-angular-wrappers/09969ff03e8961160cecb72e8814553160189445/src/app/tree/tree.component.css
--------------------------------------------------------------------------------
/src/app/tree/tree.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ViewChild } from '@angular/core';
2 | import { IgTreeComponent } from 'projects/igniteui-angular-wrappers/src/public-api';
3 | import { ProductCategories } from '../shared/product-categories';
4 |
5 | declare var jQuery: any;
6 |
7 | @Component({
8 | selector: 'app-tree',
9 | templateUrl: './tree.component.html',
10 | styleUrls: ['./tree.component.css'],
11 | standalone: false
12 | })
13 | export class TreeComponent {
14 |
15 | public options: IgTree;
16 | public data: any;
17 | public newProductCategory: any;
18 | public newProductSubcategory: any;
19 | @ViewChild('tree', { static: true }) tree: IgTreeComponent;
20 |
21 | constructor() {
22 | this.data = ProductCategories.getData();
23 | this.newProductCategory = {
24 | Name: '',
25 | ProductCategoryID: this.data.length + 1,
26 | ProductSubcategories: []
27 | };
28 |
29 | this.newProductSubcategory = {
30 | Name: '',
31 | ProductSubcategoryID: 0
32 | };
33 | this.options = {
34 | // dataSource: this.data,
35 | bindings: {
36 | childDataProperty: 'ProductSubcategories',
37 | textKey: 'Name',
38 | valueKey: 'ProductCategoryID'
39 | }
40 | };
41 | }
42 |
43 | addNodeRootLevel() {
44 | this.data.push({ Name: 'New Node', ProductCategoryID: this.data.length + 1, ProductSubcategories: [] });
45 | this.newProductCategory.ProductCategoryID = this.data.length + 1;
46 | }
47 | addProductCategory() {
48 | this.data.push(JSON.parse(JSON.stringify(this.newProductCategory)));
49 | this.newProductCategory.ProductCategoryID = this.data.length + 1;
50 |
51 | }
52 | addProductSubcategory(index) {
53 | this.data[index].ProductSubcategories.push(JSON.parse(JSON.stringify(this.newProductSubcategory)));
54 | this.newProductSubcategory.ProductSubcategoryID = this.data[index].ProductSubcategories.length + 1;
55 | this.tree.markForCheck();
56 |
57 | }
58 | deleteProductCategory(index) {
59 | this.data.removeAt(index);
60 | }
61 | updateProductSubcategory() {
62 | this.tree.markForCheck();
63 | }
64 |
65 | deleteProductSubcategory(index, subIndex) {
66 | this.data[index].ProductSubcategories.removeAt(subIndex);
67 | this.tree.markForCheck();
68 | }
69 |
70 | removeSelectedNode() {
71 | const selected = jQuery('#tree1').igTree('selectedNode');
72 | if (selected.path !== null) {
73 | jQuery('#tree1').igTree('removeAt', selected.path);
74 | } else {
75 | alert('Select a node from the tree first');
76 | }
77 | }
78 |
79 | }
80 |
--------------------------------------------------------------------------------
/src/app/upload/upload.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IgniteUI/igniteui-angular-wrappers/09969ff03e8961160cecb72e8814553160189445/src/app/upload/upload.component.css
--------------------------------------------------------------------------------
/src/app/upload/upload.component.html:
--------------------------------------------------------------------------------
1 |
11 |
14 |
15 |
16 | igUpload
2 |
3 |
20 |
4 | TRY IT OUT:
5 |
6 |
10 | 6 |
-
7 |
- Click on the button to upload a file 8 |
11 |
19 | This sample demonstrates how create an igUpload using an Ignite UI Angular Wrappers component. 12 |
13 |Note: There is no server configured with this sample, so uploads 14 | will fail.
15 | 18 |igVideoPlayer
2 |
3 |
18 |
4 | TRY IT OUT:
5 |
6 |
10 | 6 |
-
7 |
- Play the video 8 |
11 |
17 | This sample demonstrates how create an igVideoPlayer with an Ignite UI Angular Wrappers 12 | components.
13 | 16 |