<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.6/css/dx.spa.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.6/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.6.25/dist/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="config.js"></script>
<script>
System.import('app')
.then(function(viz) {
System.import("devextreme/viz/themes").then(function(viz) {
viz.currentTheme("generic.light");
viz.refreshTheme();
});
})
.catch(console.error.bind(console));
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
</body>
</html>
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here:
// https://github.com/DevExpress/devextreme-angular/blob/master/README.md
System.config({
transpiler: 'ts',
typescriptOptions: {
module: "commonjs",
emitDecoratorMetadata: true,
experimentalDecorators: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'ts': 'npm:plugin-typescript@7.0.6/lib/plugin.js',
'typescript': 'npm:typescript@2.2.2/lib/typescript.js',
'@angular/core': 'npm:@angular/core@5.1.2/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common@5.1.2/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler@5.1.2/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser@5.1.2/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@5.1.2/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http@5.1.2/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router@5.1.2/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms@5.1.2/bundles/forms.umd.js',
'rxjs': 'npm:rxjs@5.3.1',
'devextreme': 'npm:devextreme@17.2',
'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js',
'devextreme-angular': 'npm:devextreme-angular@17.2'
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts'
},
'devextreme': {
defaultExtension: 'js'
},
'devextreme-angular': {
main: 'index.js',
defaultExtension: 'js'
}
}
});
<dx-data-grid
id="gridContainer"
[dataSource]="dataSource"
keyExpr="orderID"
[allowColumnReordering]="true"
(onRowUpdating) = "onRowUpdating($event)"
(onRowValidating) ="onRowValidating($event)">
<dxo-paging [enabled]="true"></dxo-paging>
<dxo-editing
mode="row"
[allowUpdating]="true">
</dxo-editing>
<dxi-column dataField="orderID" [allowEditing]="false" caption="Title"></dxi-column>
<dxi-column dataField="customerName" [allowEditing]="false"></dxi-column>
<dxi-column dataField="actualQty" [allowEditing]="false" [calculateCellValue]="formatActualQty" [width]=140></dxi-column>
<dxi-column dataField="userGivenQty" caption="UserGiven Qty" datatype="number" [allowEditing]="true" [allowGrouping]="false">
<dxi-validation-rule type="numeric"></dxi-validation-rule>
</dxi-column>
<dxi-column dataField="inspectedQty" caption="Inspected Qty" datatype="number" [allowEditing]="true" [allowGrouping]="false">
<dxi-validation-rule type="numeric"></dxi-validation-rule>
</dxi-column>
<dxi-column dataField="variationReason" [width]="130" ></dxi-column>
<dxo-filter-row [visible]="true"></dxo-filter-row>
</dx-data-grid>
import { NgModule, Component, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxDataGridModule, DxButtonModule } from 'devextreme-angular';
import { Service, Employee, State } from './app.service';
if(!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
selector: 'demo-app',
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css'],
providers: [Service]
})
export class AppComponent {
dataSource: Order[];
constructor(service: Service) {
this.dataSource = service.getOrders();
}
onRowValidating(e){
let actualQty = e.oldData.actualQty;
let userGivenQty = e.newData.userGivenQty != null? e.newData.userGivenQty : e.oldData.userGivenQty;
let inspectedQty= e.newData.inspectedQty != null? e.newData.inspectedQty: e.oldData.inspectedQty;
let variationReason = e.newData.variationReason != null ? e.newData.variationReason : e.oldData.variationReason;
if(userGivenQty === "" && inspectedQty === "" && variationReason === ""){
e.isValid = true;
return
}
if(this.isEmpty(userGivenQty ) && this.isEmpty(inspectedQty) && !this.isEmpty(variationReason )){
alert('Please remove the variation reason as there are no quantities given', 'Error');
e.isValid = false;
return;
}
debugger;
userGivenQty = Number(this.isEmpty(userGivenQty)? 0 : userGivenQty);
inspectedQty = Number(this.isEmpty(inspectedQty)? 0 : inspectedQty);
debugger;
if (Math.abs(userGivenQty- actualQty) > 0.0 || (Math.abs(inspectedQty- actualQty) > 0.0 )) {
if (variationReason === null || variationReason === "") {
alert("Please provide a valid reason for the variation", 'error');
e.isValid = false;
return;
}
}
}
onRowUpdating(e){
alert("updated row");
}
isEmpty(value: any): boolean {
return value == null || value === "" ? true : false;
}
formatActualQty(data):number{
let qty = data.actualQty;
if (Math.abs(qty) < 0.01) {
return 0;
}else{
let value = qty;
let precision = data.precision;
if(precision > 0){
value = qty.toFixed(precision);
}
let valueStr = value.toString();
let p = valueStr.indexOf('.');
//convert number to comma separated string
return valueStr.replace(/\d(?=(?:\d{3})+(?:\.|$))/g, function ($0, i) {
return p < 0 || i < p ? ($0 + ',') : $0;
});
}
}
}
@NgModule({
imports: [
BrowserModule,
DxDataGridModule,
DxButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
import { Injectable } from '@angular/core';
export class Order {
orderID: number;
customerName: string;
shipCountry: string;
shipCity: string;
actualQty: number;
userGivenQty: number;
inspectedQty: number;
variationReason: string;
precision:number;
}
let orders: Order[] = [
{
"orderID": 10248,
"customerName": "Paul Henriot",
"shipCountry": "France",
"shipCity": "Reims",
"actualQty": 39.05,
"userGivenQty": null,
"inspectedQty":null,
"variationReason":null,
"precision":4
},
{
"orderID": 10249,
"customerName": "Karen Base",
"shipCountry": "Germany",
"shipCity": "Stuggart",
"actualQty": 56584.23,
"userGivenQty": null,
"inspectedQty":null,
"variationReason":null,
"precision":-99
},
{
"orderID": 10250,
"customerName": "Maurice Glen",
"shipCountry": "France",
"shipCity": "Reims",
"actualQty": 56590.05,
"userGivenQty": null,
"inspectedQty":null,
"variationReason":null,
"precision":-99
},
{
"orderID": 10251,
"customerName": "Weni Mary",
"shipCountry": "UK",
"shipCity": "London",
"actualQty": 113.15,
"userGivenQty": null,
"inspectedQty":null,
"variationReason":null,
"precision":-99
},
{
"orderID": 10252,
"customerName": "Candice Nikola",
"shipCountry": "Italy",
"shipCity": "Rome",
"actualQty": 343434399.75,
"userGivenQty": null,
"inspectedQty":null,
"variationReason":null,
"precision":-99
}
];
@Injectable()
export class Service {
getOrders() {
return orders;
}
}
/deep/ #events {
background-color: rgba(191, 191, 191, 0.15);
padding: 20px;
margin-top: 20px;
}
/deep/ #events > div {
padding-bottom: 5px;
}
/deep/ #events > div:after {
content: "";
display: table;
clear: both;
}
/deep/ #events #clear {
float: right;
}
/deep/ #events .caption {
float: left;
font-weight: bold;
font-size: 115%;
line-height: 115%;
padding-top: 7px;
}
/deep/ #events ul {
list-style: none;
max-height: 100px;
overflow: auto;
}
/deep/ #events ul li {
padding: 7px 0;
border-bottom: 1px solid #dddddd;
}
/deep/ #events ul li:last-child {
border-bottom: none;
}
var orders = [{
"orderID": 10248,
"pending": "Y",
"orderDate": "1996-07-04T00:00:00",
"customerName": "Paul Henriot",
"shipCountry": "France",
"shipCity": "Reims",
"pendingRequest":"1"
}, {
"orderID": 10249,
"pending": "N",
"orderDate": "1996-07-05T00:00:00",
"customerName": "Karin Josephs",
"shipCountry": "Germany",
"shipCity": "Münster",
"pendingRequest":"0"
}, {
"orderID": 10250,
"pending": "Y",
"orderDate": "1996-07-08T00:00:00",
"customerName": "Mario Pontes",
"shipCountry": "Brazil",
"shipCity": "Rio de Janeiro",
"pendingRequest":"1"
}, {
"orderID": 10251,
"pending": "N",
"orderDate": "1996-07-08T00:00:00",
"customerName": "Mary Saveley",
"shipCountry": "France",
"shipCity": "Lyon",
"pendingRequest":"0"
}, {
"orderID": 10252,
"pending": "Y",
"orderDate": "1996-07-09T00:00:00",
"customerName": "Pascale Cartrain",
"shipCountry": "Belgium",
"shipCity": "Charleroi",
"pendingRequest":"1"
}, {
"orderID": 10253,
"pending": "N",
"orderDate": "1996-07-10T00:00:00",
"customerName": "Mario Pontes",
"shipCountry": "Brazil",
"shipCity": "Rio de Janeiro",
"pendingRequest":"0"
}, {
"orderID": 10254,
"pending": "N",
"orderDate": "1996-07-11T00:00:00",
"customerName": "Yang Wang",
"shipCountry": "Switzerland",
"shipCity": "Bern"
}, {
"orderID": 10255,
"pending": "Y",
"orderDate": "1996-07-12T00:00:00",
"customerName": "Michael Holz",
"shipCountry": "Germany",
"shipCity": "Genève",
"pendingRequest":"0"
}, {
"orderID": 10256,
"pending": "Y",
"orderDate": "1996-07-15T00:00:00",
"customerName": "Paula Parente",
"shipCountry": "Brazil",
"shipCity": "Resende",
"pendingRequest":"1"
}, {
"orderID": 10257,
"pending": "N",
"orderDate": "1996-07-16T00:00:00",
"customerName": "Carlos Hernández",
"shipCountry": "Germany",
"shipCity": "San Cristóbal",
"pendingRequest":"0"
}, {
"orderID": 10258,
"pending": "Y",
"orderDate": "1996-07-17T00:00:00",
"customerName": "Roland Mendel",
"shipCountry": "Austria",
"shipCity": "Graz",
"pendingRequest":"0"
}, {
"orderID": 10259,
"pending": "Y",
"orderDate": "1996-07-18T00:00:00",
"customerName": "Francisco Chang",
"shipCountry": "Mexico",
"shipCity": "México D.F.",
"pendingRequest":""
}, {
"orderID": 10260,
"pending": "Y",
"orderDate": "1996-07-19T00:00:00",
"customerName": "Henriette Pfalzheim",
"shipCountry": "Germany",
"shipCity": "Köln",
"pendingRequest":"0"
}, {
"orderID": 10261,
"pending": "N",
"orderDate": "1996-07-19T00:00:00",
"customerName": "Bernardo Batista",
"shipCountry": "Brazil",
"shipCity": "Rio de Janeiro",
"pendingRequest":"0"
} ];