<dx-data-grid
id="orders"
[dataSource]="productsDataSource"
[repaintChangesOnly]="true"
[columnAutoWidth]="true"
[showBorders]="true">
<dxo-paging [pageSize]="10"></dxo-paging>
<dxi-column dataField="ProductName" dataType="string"></dxi-column>
<dxi-column dataField="UnitPrice" dataType="number" format="currency"></dxi-column>
<dxi-column dataField="OrderCount" dataType="number"></dxi-column>
<dxi-column dataField="Quantity" dataType="number"></dxi-column>
<dxi-column dataField="Amount" dataType="number" format="currency" [allowSorting]="true"></dxi-column>
<dxo-summary>
<dxi-total-item column="ProductName" summaryType="count"></dxi-total-item>
<dxi-total-item column="Amount" summaryType="sum" displayFormat="{0}" valueFormat="currency"></dxi-total-item>
<dxi-total-item column="OrderCount" summaryType="sum" displayFormat="{0}"></dxi-total-item>
</dxo-summary>
<dxo-master-detail
[enabled]="true"
template="productDetail">
</dxo-master-detail>
<div *dxTemplate="let detail of 'productDetail'">
<dx-data-grid
[dataSource]="getDetailGridDataSource(detail.data)"
[columnAutoWidth]="true"
[repaintChangesOnly]="true"
[showBorders]="true">
<dxo-paging [pageSize]="5"></dxo-paging>
<dxi-column dataField="OrderID" dataType="number"></dxi-column>
<dxi-column dataField="ShipCity" dataType="string"></dxi-column>
<dxi-column dataField="OrderDate" dataType="datetime" format="yyyy/MM/dd HH:mm:ss"></dxi-column>
<dxi-column dataField="UnitPrice" dataType="number" format="currency"></dxi-column>
<dxi-column dataField="Quantity" dataType="number"></dxi-column>
<dxi-column caption="Amount" dataType="number" format="currency" [allowSorting]="true" [calculateCellValue]="getAmount"></dxi-column>
<dxo-summary>
<dxi-total-item column="OrderID" summaryType="count"></dxi-total-item>
<dxi-total-item column="Quantity" summaryType="sum" displayFormat="{0}"></dxi-total-item>
<dxi-total-item column="Amount" summaryType="sum" displayFormat="{0}" valueFormat="currency"></dxi-total-item>
</dxo-summary>
</dx-data-grid>
</div>
</dx-data-grid>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Update frequency:</span>
<dx-slider
[min]="10"
[step]="10"
[max]="5000"
[(value)]="updatesPerSecond">
<dxo-tooltip
[enabled]="true"
format="#0 per second"
showMode="always"
position="top">
</dxo-tooltip>
</dx-slider>
</div>
</div>
import { NgModule, Component, enableProdMode, ChangeDetectionStrategy } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxDataGridModule, DxSliderModule } from 'devextreme-angular';
import DataSource from 'devextreme/data/data_source';
import ArrayStore from 'devextreme/data/array_store';
import { Product, Order, Service } 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],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
productsDataSource: DataSource;
orders: ArrayStore;
updatesPerSecond: number = 100;
constructor(service: Service) {
this.productsDataSource = new DataSource({
store: service.getProducts(),
reshapeOnPush: true
});
this.orders = service.getOrders();
setInterval(() => {
if(service.getOrderCount() > 500000) {
return;
}
for(var i = 0; i < this.updatesPerSecond / 20; i++) {
service.addOrder();
}
}, 50);
}
getDetailGridDataSource(product: Product) {
return new DataSource({
store: this.orders,
reshapeOnPush: true,
filter: ["ProductID", "=", product.ProductID]
});
}
getAmount(order: Order) {
return order.UnitPrice * order.Quantity;
}
}
@NgModule({
imports: [
BrowserModule,
DxDataGridModule,
DxSliderModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep .options {
padding: 20px;
margin-top: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
::ng-deep .caption {
font-weight: 500;
font-size: 18px;
}
::ng-deep .option {
margin-top: 10px;
}
::ng-deep .option > span {
position: relative;
top: 2px;
margin-right: 10px;
}
::ng-deep .option > .dx-widget {
width: 500px;
display: inline-block;
vertical-align: middle;
}
import { Injectable } from '@angular/core';
import ArrayStore from 'devextreme/data/array_store';
export class Product {
ProductID: number;
ProductName: string;
UnitPrice: number;
Quantity: number;
Amount: number;
OrderCount: number;
}
export class Order {
OrderID: number;
ShipCity: string;
ProductID: number;
UnitPrice: number;
OrderDate: Date;
Quantity: number;
}
const cities = ["Los Angeles","Denver","Bentonville","Atlanta","Reno","Beaver","Malibu","Phoenix","San Diego","Little Rock","Pasadena","Boise","San Jose","Chatsworth","San Fernando","South Pasadena","San Fernando Valley","La Canada","St. Louis"];
let products: Product[] = [];
for(var i = 1; i <= 100; i++) {
products.push({
ProductID: i,
ProductName: "Product " + i,
UnitPrice: Math.floor(Math.random() * 1000) + 1,
Quantity: 0,
Amount: 0,
OrderCount: 0
});
}
let productsStore: ArrayStore = new ArrayStore({
data: products,
key: "ProductID"
});
let orders = [];
let ordersStore = new ArrayStore({
key: "OrderID",
data: orders
});
@Injectable()
export class Service {
getProducts() {
return productsStore;
}
getOrders() {
return ordersStore;
}
getOrderCount() {
return orders.length;
}
addOrder() {
let product = products[Math.round(Math.random() * 99)];
let order: Order = {
OrderID: orders.length ? orders[orders.length - 1].OrderID + 1 : 20001,
ShipCity: cities[Math.round(Math.random() * (cities.length - 1))],
ProductID: product.ProductID,
UnitPrice: product.UnitPrice,
OrderDate: new Date(),
Quantity: Math.round(Math.random() * 20) + 1
};
ordersStore.push([{ type: "insert", data: order }]);
productsStore.push([{
type: "update",
key: order.ProductID,
data: {
OrderCount: product.OrderCount + 1,
Quantity: product.Quantity + order.Quantity,
Amount: product.Amount + order.UnitPrice * order.Quantity
}
}]);
}
}
// 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.0.3/tslib.js',
'rxjs': 'npm:rxjs@6.3.3',
'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.4',
'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@0.9.7/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.0.5',
'devexpress-gantt': 'npm:devexpress-gantt@2.0.8',
'devextreme-angular': 'npm:devextreme-angular@20.2.4',
'preact': 'npm:preact@10.5.7/dist/preact.js',
'preact/hooks': 'npm:preact@10.5.7/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.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/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>