<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>devextreme-angular2 playground</title>
<link rel="stylesheet" href="https://unpkg.com/devextreme@16.2/dist/css/dx.common.css" />
<link rel="stylesheet" href="https://unpkg.com/devextreme@16.2/dist/css/dx.light.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/zone.js@0.6.25/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js@0.6.25/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="https://unpkg.com/typescript@2.0.10/lib/typescript.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
/* Styles go here */
### DevExtreme Angular 2 simple plunker
https://github.com/DevExpress/devextreme-angular
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
app: "./src",
'@angular/core': 'npm:@angular/core@2.4.3/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common@2.4.3/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler@2.4.3/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser@2.4.3/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@2.4.3/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http@2.4.3/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router@3.4.3/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms@2.4.3/bundles/forms.umd.js',
'rxjs': 'npm:rxjs@5.0.3',
'devextreme': 'npm:devextreme@16.2',
'jquery': 'npm:jquery@3.1.1/dist/jquery.min.js',
'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js',
'devextreme-angular': 'npm:devextreme-angular@16.2'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
'devextreme': {
defaultExtension: 'js'
},
'devextreme-angular': {
main: 'index.js',
defaultExtension: 'js'
}
}
});
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {App} from './app';
import { HttpModule } from '@angular/http';
import { CashService } from './cash.service';
import {DxDataGridModule } from 'devextreme-angular';
@NgModule({
imports: [
BrowserModule,
HttpModule,
DxDataGridModule,
],
providers: [ CashService ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule)
import { Component, OnInit, Input } from '@angular/core';
import { Http } from '@angular/http';
import { CashService } from 'src/cash.service';
import ArrayStore from 'devextreme/data/array_store';
@Component({
selector: 'my-app',
template: `
<h3 class="card-title">Current</h3>
<div style="height: 280px; width: 100%">
<dx-data-grid style="height: 100%;" id="gridContainer" [dataSource]="cash" allowColumnResizing="true"
[columnAutoWidth]=true
[rowAlternationEnabled]=true [columns]="customcols">
<dxo-column-chooser [enabled]="true"></dxo-column-chooser>
</dx-data-grid>
</div>
<br>
<h3 class="card-title">Expected</h3>
<div style="height: 280px; width: 100%">
<dx-data-grid style="height: 100%" id="gridContainer" allowColumnResizing="true"
[columnAutoWidth]=true
[rowAlternationEnabled]=true
[dataSource]="cash2" [columns]="customcols2" [editing]="editing"
(onEditorPreparing)="EditCell($event)" (onCellPrepared)="LogEdits($event)">
<dxo-column-chooser [enabled]="true"></dxo-column-chooser>
</dx-data-grid>
</div>
`
providers: [CashService],
})
export class App implements OnInit {
private cash: any[];
private colWidthTable: number;
public cash2: any[];
public cols = [];
public customcols = [];
public customcols2 = [];
public editing = {};
public CellRow: number;
public CellCol: number;
public start: number;
public end: number;
public keyDataField: string;
constructor(private _CashService: CashService, private http: Http) { }
public ngOnInit() {
this.Initalize();
this._CashService.getCash()
.subscribe((data: any[]) => {
this.cash = data;
this.cash2 = JSON.parse(JSON.stringify(data));
this.cols = Object.keys(data[0]);
this.cols.forEach((item, index) => {
if (item === 'ValueDate') {
this.customcols.push({
dataField: item,
dataType: 'date',
format: 'dd/MM/yyyy',
allowEditing: false,
fixed: true,
width: '90px',
});
this.customcols2.push({
dataField: item,
dataType: 'date',
format: 'dd/MM/yyyy',
allowEditing: false,
fixed: true,
width: '90px',
});
}
else {
this.customcols.push({
dataField: item,
dataType: 'number',
format: {
// tslint:disable-next-line:object-literal-shorthand
formatter: function (originalValue) {
return originalValue.toLocaleString('en-US', { minimumFractionDigits: 2 });
}
}
});
this.customcols2.push({
dataField: item,
dataType: 'number',
format: {
formatter: function (originalValue) {
return originalValue.toLocaleString('en-US', { minimumFractionDigits: 2 });
}
}
});
}
});
})
this.editing = {
allowUpdating: true,
mode: 'cell',
allowAdding: false,
allowDeleting: false
};
}
public Initalize() {
this.cash = [];
this.cols = [];
this.cash2 = [];
this.customcols = [];
this.customcols2 = [];
}
public EditCell(e) {
this.start = 0;
this.end = 0;
this.keyDataField = e.dataField;
this.start = e.value;
this.CellRow = e.row.rowIndex;
this.CellCol = e.index;
}
public LogEdits(value) {
if (value.rowType === 'data' && value.column.dataField !== 'ValueDate') {
if (value.value < 0) { value.cellElement.addClass('red'); }
if (value.value > 0) { value.cellElement.addClass('green'); }
}
if (value.rowType === 'data') {
if (this.CellRow === value.row.rowIndex && this.CellCol === value.columnIndex) {
if (this.end !== value.value - this.start) {
this.end = value.value - this.start;
this.myValueDate = this.cash2[this.CellRow].ValueDate;
for (let i = this.CellRow + 1; i < this.cash2.length; i++) {
this.cash2[i][this.keyDataField] += (this.end)
};
};
};
};
};
}
import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/observable/of';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/map';
@Injectable()
export class CashService {
private currentCashUrl = 'src/cash.json';
private data = 'src/cash.json';
private observable: Observable<any>;
constructor(private http: Http) { }
getCash(){
return this.http.get(this.currentCashUrl)
.map((res) => res.json());
}
}
[
{
"ValueDate": "2017-04-28",
"AUD": 8500.0,
"CAD": 38263.28,
"CHF": 63.84,
"EUR": 14601.8,
"GBP": 820.9,
"HKD": 112538.92,
"JPY": 997.33,
"KRW": 0.0,
"NZD": 12016.82,
"SGD": 27017.88,
"USD": 19997.13
},
{
"ValueDate": "2017-04-29",
"AUD": 8500.0,
"CAD": 38263.28,
"CHF": 63.84,
"EUR": 14601.8,
"GBP": 820.9,
"HKD": 112538.92,
"JPY": 997.33,
"KRW": 0.0,
"NZD": 12016.82,
"SGD": 27017.88,
"USD": 19997.13
},
{
"ValueDate": "2017-04-30",
"AUD": 8500.0,
"CAD": 38263.28,
"CHF": 63.79,
"EUR": 14600.67,
"GBP": 820.9,
"HKD": 112538.92,
"JPY": 997.33,
"KRW": 0.0,
"NZD": 12018.72,
"SGD": 27017.88,
"USD": 20000.92
},
{
"ValueDate": "2017-05-01",
"AUD": 42208.49,
"CAD": 38263.28,
"CHF": 63.79,
"EUR": 14600.67,
"GBP": 820.9,
"HKD": 112538.92,
"JPY": 997.33,
"KRW": 0.0,
"NZD": 12018.72,
"SGD": 27017.88,
"USD": 20000.92
},
{
"ValueDate": "2017-05-02",
"AUD": 40206.71,
"CAD": 38263.28,
"CHF": 63.79,
"EUR": 14600.67,
"GBP": 820.9,
"HKD": 112538.92,
"JPY": 997.33,
"KRW": 0.0,
"NZD": 12018.72,
"SGD": 27017.88,
"USD": 20000.92
},
{
"ValueDate": "2017-05-03",
"AUD": 40206.71,
"CAD": 38263.28,
"CHF": 63.79,
"EUR": 14600.67,
"GBP": 820.9,
"HKD": 112538.92,
"JPY": 997.33,
"KRW": 0.0,
"NZD": 12018.72,
"SGD": 27017.88,
"USD": 436885.26
},
{
"ValueDate": "2017-05-04",
"AUD": 45605.71,
"CAD": 38263.28,
"CHF": 63.79,
"EUR": 18708.12,
"GBP": 820.9,
"HKD": 112538.92,
"JPY": 997.33,
"KRW": 0.0,
"NZD": 12018.72,
"SGD": 27017.88,
"USD": 436885.26
},
{
"ValueDate": "2017-05-05",
"AUD": 45605.71,
"CAD": 38263.28,
"CHF": 63.79,
"EUR": 18708.12,
"GBP": 820.9,
"HKD": 112538.92,
"JPY": 997.33,
"KRW": 0.0,
"NZD": 12018.72,
"SGD": 27017.88,
"USD": 436885.26
}
]