<dx-data-grid
id="grid"
[dataSource]="dataSource"
[repaintChangesOnly]="true"
[showBorders]="true">
<dxo-scrolling mode="virtual"></dxo-scrolling>
<dxo-editing
mode="cell"
[refreshMode]="refreshMode"
[allowAdding]="true"
[allowUpdating]="true"
[allowDeleting]="true">
</dxo-editing>
<dxi-column dataField="CustomerID" caption="Customer">
<dxo-lookup [dataSource]="customersData" valueExpr="Value" displayExpr="Text"></dxo-lookup>
</dxi-column>
<dxi-column dataField="OrderDate" dataType="date"></dxi-column>
<dxi-column dataField="Freight"></dxi-column>
<dxi-column dataField="ShipCountry"></dxi-column>
<dxi-column dataField="ShipVia" caption="Shipping Company" dataType="number">
<dxo-lookup [dataSource]="shippersData" valueExpr="Value" displayExpr="Text"></dxo-lookup>
</dxi-column>
<dxo-summary>
<dxi-total-item
column="CustomerID"
summaryType="count">
</dxi-total-item>
<dxi-total-item
column="Freight"
summaryType="sum"
valueFormat="#0.00">
</dxi-total-item>
</dxo-summary>
</dx-data-grid>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Refresh Mode:</span>
<dx-select-box
[(value)]="refreshMode"
[items]="refreshModes">
</dx-select-box>
</div>
<div id="requests">
<div>
<div class="caption">Network Requests</div>
<dx-button
id="clear"
text="Clear"
(onClick)="clearRequests()">
</dx-button>
</div>
<ul>
<li *ngFor="let request of requests">{{request}}</li>
</ul>
</div>
</div>
import { NgModule, Component, enableProdMode, ChangeDetectionStrategy } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { HttpClient, HttpClientModule, HttpHeaders, HttpParams } from '@angular/common/http';
import { DxDataGridModule, DxSelectBoxModule, DxButtonModule } from 'devextreme-angular';
import CustomStore from 'devextreme/data/custom_store';
import { formatDate } from 'devextreme/localization';
if(!/localhost/.test(document.location.host)) {
enableProdMode();
}
var URL = "https://js.devexpress.com/Demos/Mvc/api/DataGridWebApi";
@Component({
selector: 'demo-app',
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css'],
preserveWhitespaces: true
})
export class AppComponent {
dataSource: any;
customersData: any;
shippersData: any;
refreshModes: string[];
refreshMode: string;
requests: string[] = [];
constructor(private http: HttpClient) {
this.refreshMode = "reshape";
this.refreshModes = ["full", "reshape", "repaint"];
this.dataSource = new CustomStore({
key: "OrderID",
load: () => this.sendRequest(URL + "/Orders"),
insert: (values) => this.sendRequest(URL + "/InsertOrder", "POST", {
values: JSON.stringify(values)
}),
update: (key, values) => this.sendRequest(URL + "/UpdateOrder", "PUT", {
key: key,
values: JSON.stringify(values)
}),
remove: (key) => this.sendRequest(URL + "/DeleteOrder", "DELETE", {
key: key
})
});
this.customersData = {
paginate: true,
store: new CustomStore({
key: "Value",
loadMode: "raw",
load: () => this.sendRequest(URL + "/CustomersLookup")
})
};
this.shippersData = new CustomStore({
key: "Value",
loadMode: "raw",
load: () => this.sendRequest(URL + "/ShippersLookup")
});
}
sendRequest(url: string, method: string = "GET", data: any = {}): any {
this.logRequest(method, url, data);
let httpParams = new HttpParams({ fromObject: data });
let httpOptions = { withCredentials: true, body: httpParams };
let result;
switch(method) {
case "GET":
result = this.http.get(url, httpOptions);
break;
case "PUT":
result = this.http.put(url, httpParams, httpOptions);
break;
case "POST":
result = this.http.post(url, httpParams, httpOptions);
break;
case "DELETE":
result = this.http.delete(url, httpOptions);
break;
}
return result
.toPromise()
.then((data: any) => {
return method === "GET" ? data.data : data;
})
.catch(e => {
throw e && e.error && e.error.Message;
});
}
logRequest(method: string, url: string, data: object): void {
var args = Object.keys(data || {}).map(function(key) {
return key + "=" + data[key];
}).join(" ");
var time = formatDate(new Date(), "HH:mm:ss");
this.requests.unshift([time, method, url.slice(URL.length), args].join(" "))
}
clearRequests() {
this.requests = [];
}
}
@NgModule({
imports: [
BrowserModule,
DxDataGridModule,
DxSelectBoxModule,
DxButtonModule,
HttpClientModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #grid {
height: 440px;
}
::ng-deep .options {
padding: 20px;
margin-top: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
::ng-deep .caption {
margin-bottom: 10px;
font-weight: 500;
font-size: 18px;
}
::ng-deep .option {
margin-bottom: 10px;
}
::ng-deep .option > span {
position: relative;
top: 2px;
margin-right: 10px;
}
::ng-deep .option > .dx-widget {
display: inline-block;
vertical-align: middle;
}
::ng-deep #requests .caption {
float: left;
padding-top: 7px;
}
::ng-deep #requests > div {
padding-bottom: 5px;
}
::ng-deep #requests > div:after {
content: "";
display: table;
clear: both;
}
::ng-deep #requests #clear {
float: right;
}
::ng-deep #requests ul {
list-style: none;
max-height: 100px;
overflow: auto;
margin: 0;
}
::ng-deep #requests ul li {
padding: 7px 0;
border-bottom: 1px solid #dddddd;
}
::ng-deep #requests ul li:last-child {
border-bottom: none;
}
// 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://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/
System.config({
transpiler: 'ts',
typescriptOptions: {
module: "system",
emitDecoratorMetadata: true,
experimentalDecorators: true
},
meta: {
'typescript': {
"exports": "ts"
},
'devextreme/localization.js': {
"esModule": true
}
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@3.5.3/lib/typescript.js',
'@angular': 'npm:@angular',
'tslib': 'npm:tslib@2.1.0/tslib.js',
'rxjs': 'npm:rxjs@6.4.0',
'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@20.2.5',
'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@0.9.8/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.0.11',
'devexpress-gantt': 'npm:devexpress-gantt@2.0.18',
'devextreme-angular': 'npm:devextreme-angular@20.2.5',
'preact': 'npm:preact@10.5.11/dist/preact.js',
'preact/hooks': 'npm:preact@10.5.11/hooks/dist/hooks.js'
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts'
},
'devextreme': {
defaultExtension: 'js'
},
'devextreme/events/utils': {
main: 'index'
},
'devextreme/events': {
main: 'index'
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js'
}
},
packageConfigPaths: [
"npm:@angular/*/package.json",
"npm:@angular/common/*/package.json",
"npm:rxjs/package.json",
"npm:rxjs/operators/package.json",
"npm:devextreme-angular/*/package.json",
"npm:devextreme-angular/ui/*/package.json",
"npm:devextreme-angular/package.json",
"npm:devexpress-diagram/package.json",
"npm:devexpress-gantt/package.json",
]
});
<!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/20.2.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/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.10.2/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app').catch(console.error.bind(console));
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
</body>
</html>