<dx-diagram id="diagram" #diagram customShapeTemplate="customShapeTemplate" customShapeToolboxTemplate="customShapeToolboxTemplate" (onRequestLayoutUpdate)="requestLayoutUpdateHandler($event)">
<dxi-custom-shape type="employee"
baseType="rectangle"
category="employee"
title="New Employee"
[defaultWidth]="1.5"
[defaultHeight]="1"
[toolboxWidthToHeightRatio]="2"
[minWidth]="1.5"
[minHeight]="1"
[maxWidth]="3"
[maxHeight]="2"
[allowEditText]="false">
</dxi-custom-shape>
<svg *dxTemplate="let item of 'customShapeTemplate'" class="template">
<text class="template-name" x="50%" y="20%">{{item.dataItem ? item.dataItem.Full_Name : "Employee's Name"}}</text>
<text class="template-title" x="50%" y="45%">{{item.dataItem ? item.dataItem.Title : "Employee's Title"}}</text>
<text class="template-button" x="40%" y="85%" (click)="editEmployee(item.dataItem)">Edit</text>
<text class="template-button" x="62%" y="85%" (click)="deleteEmployee(item.dataItem)">Delete</text>
</svg>
<svg *dxTemplate="let item of 'customShapeToolboxTemplate'" class="template">
<text x="50%" y="40%">New</text>
<text x="50%" y="70%">Employee</text>
</svg>
<dxo-nodes [dataSource]="dataSource" keyExpr="ID" [typeExpr]="itemTypeExpr" [customDataExpr]="itemCustomDataExpr" parentKeyExpr="Head_ID">
<dxo-auto-layout type="tree"></dxo-auto-layout>
</dxo-nodes>
<dxo-context-toolbox [width]="100" [shapeIconsPerRow]="1">
</dxo-context-toolbox>
<dxo-toolbox [showSearch]="false" [shapeIconsPerRow]="1">
<dxi-group category="employee" title="Employee" [expanded]="true"></dxi-group>
</dxo-toolbox>
<dxo-properties-panel>
<dxi-tab>
<dxi-group title="Page Properties" [commands]='["pageSize","pageOrientation","pageColor"]'></dxi-group>
</dxi-tab>
</dxo-properties-panel>
</dx-diagram>
<dx-popup [width]="400"
[height]="480"
[showTitle]="true"
title="Edit Employee"
[dragEnabled]="false"
[(visible)]="popupVisible">
<div *dxTemplate="let data of 'content'">
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">Name</div>
<div class="dx-field-value">
<dx-text-box [(value)]="currentEmployee.Full_Name"></dx-text-box>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Title</div>
<div class="dx-field-value">
<dx-text-box [(value)]="currentEmployee.Title"></dx-text-box>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">City</div>
<div class="dx-field-value">
<dx-text-box [(value)]="currentEmployee.City"></dx-text-box>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">State</div>
<div class="dx-field-value">
<dx-text-box [(value)]="currentEmployee.State"></dx-text-box>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Email</div>
<div class="dx-field-value">
<dx-text-box [(value)]="currentEmployee.Email"></dx-text-box>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Skype</div>
<div class="dx-field-value">
<dx-text-box [(value)]="currentEmployee.Skype"></dx-text-box>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Phone</div>
<div class="dx-field-value">
<dx-text-box [(value)]="currentEmployee.Mobile_Phone"></dx-text-box>
</div>
</div>
</div>
<div class="dx-fieldset buttons">
<dx-button text="Update"
type="default"
(click)="this.updateEmployee()">
</dx-button>
<dx-button text="Cancel"
(click)="this.cancelEditEmployee()">
</dx-button>
</div>
</div>
</dx-popup>
import { NgModule, Component, ViewChild, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxPopupModule, DxTemplateModule, DxDiagramModule, DxDiagramComponent, DxTextBoxModule, DxButtonModule } from 'devextreme-angular';
import ArrayStore from 'devextreme/data/array_store';
import { Service, Employee } 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],
preserveWhitespaces: true
})
export class AppComponent {
@ViewChild(DxDiagramComponent, { static: false }) diagram: DxDiagramComponent;
currentEmployee: Employee = new Employee();
employees: Employee[];
dataSource: ArrayStore;
popupVisible = false;
generatedID = 100;
constructor(service: Service) {
var that = this;
this.employees = service.getEmployees();
this.dataSource = new ArrayStore({
key: "ID",
data: service.getEmployees(),
onInserting: function(values) {
values.ID = values.ID || that.generatedID++;
values.Full_Name = values.Full_Name || "Employee's Name";
values.Title = values.Title || "Employee's Title";
}
});
}
itemTypeExpr(obj) {
return "employee";
}
itemCustomDataExpr(obj, value) {
if(value === undefined) {
return {
"Full_Name": obj.Full_Name,
"Prefix": obj.Prefix,
"Title": obj.Title,
"City": obj.City,
"State": obj.State,
"Email": obj.Email,
"Skype": obj.Skype,
"Mobile_Phone": obj.Mobile_Phone
};
} else {
obj.Full_Name = value.Full_Name;
obj.Prefix = value.Prefix;
obj.Title = value.Title;
obj.City = value.City;
obj.State = value.State;
obj.Email = value.Email;
obj.Skype = value.Skype;
obj.Mobile_Phone = value.Mobile_Phone;
}
}
requestLayoutUpdateHandler(e) {
for(var i = 0; i < e.changes.length; i++) {
if(e.changes[i].type === 'remove')
e.allowed = true;
else if(e.changes[i].data.Head_ID !== undefined && e.changes[i].data.Head_ID !== null)
e.allowed = true;
}
}
editEmployee(employee) {
this.currentEmployee = Object.assign({}, employee);
this.popupVisible = true;
}
deleteEmployee(employee) {
this.dataSource.push([{ type: 'remove', key: employee.ID }]);
}
updateEmployee() {
this.dataSource.push([{
type: 'update',
key: this.currentEmployee.ID,
data: {
"Full_Name": this.currentEmployee.Full_Name,
"Title": this.currentEmployee.Title,
"City": this.currentEmployee.City,
"State": this.currentEmployee.State,
"Email": this.currentEmployee.Email,
"Skype": this.currentEmployee.Skype,
"Mobile_Phone": this.currentEmployee.Mobile_Phone
}
}]);
this.popupVisible = false;
}
cancelEditEmployee() {
this.currentEmployee = undefined;
this.popupVisible = false;
}
}
@NgModule({
imports: [
BrowserModule,
DxDiagramModule,
DxPopupModule,
DxTextBoxModule,
DxButtonModule,
DxTemplateModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #diagram {
height: 725px;
}
::ng-deep #diagram .template .template-name {
font-weight: bold;
text-decoration: underline;
}
::ng-deep #diagram .template .template-title {
font-style: italic;
}
::ng-deep #diagram .template .template-button {
cursor: pointer;
font-size: 8pt;
fill: navy;
}
::ng-deep #diagram .template .template-button:hover {
text-decoration: underline;
}
::ng-deep .dx-popup-content {
padding: 0;
}
::ng-deep .dx-popup-content .dx-fieldset.buttons {
display: flex;
justify-content: flex-end;
}
::ng-deep .dx-popup-content .dx-fieldset.buttons > * {
margin-left: 8px;
}
import { Injectable } from '@angular/core';
export class Employee {
ID: number;
Head_ID: number;
Full_Name: string;
Prefix: string;
Title: string;
City: string;
State: string;
Email: string;
Skype: string;
Mobile_Phone: string;
Birth_Date: string;
Hire_Date: string;
}
let employees: Employee[] = [{
"ID": 1,
"Head_ID": undefined,
"Full_Name": "John Heart",
"Prefix": "Mr.",
"Title": "CEO",
"City": "Los Angeles",
"State": "California",
"Email": "jheart@dx-email.com",
"Skype": "jheart_DX_skype",
"Mobile_Phone": "(213) 555-9392",
"Birth_Date": "1964-03-16",
"Hire_Date": "1995-01-15"
}, {
"ID": 2,
"Head_ID": 1,
"Full_Name": "Samantha Bright",
"Prefix": "Dr.",
"Title": "COO",
"City": "Los Angeles",
"State": "California",
"Email": "samanthab@dx-email.com",
"Skype": "samanthab_DX_skype",
"Mobile_Phone": "(213) 555-2858",
"Birth_Date": "1966-05-02",
"Hire_Date": "2004-05-24"
}, {
"ID": 3,
"Head_ID": 1,
"Full_Name": "Arthur Miller",
"Prefix": "Mr.",
"Title": "CTO",
"City": "Denver",
"State": "Colorado",
"Email": "arthurm@dx-email.com",
"Skype": "arthurm_DX_skype",
"Mobile_Phone": "(310) 555-8583",
"Birth_Date": "1972-07-11",
"Hire_Date": "2007-12-18"
}, {
"ID": 4,
"Head_ID": 1,
"Full_Name": "Robert Reagan",
"Prefix": "Mr.",
"Title": "CMO",
"City": "Bentonville",
"State": "Arkansas",
"Email": "robertr@dx-email.com",
"Skype": "robertr_DX_skype",
"Mobile_Phone": "(818) 555-2387",
"Birth_Date": "1974-09-07",
"Hire_Date": "2002-11-08"
}, {
"ID": 5,
"Head_ID": 1,
"Full_Name": "Greta Sims",
"Prefix": "Ms.",
"Title": "HR Manager",
"City": "Atlanta",
"State": "Georgia",
"Email": "gretas@dx-email.com",
"Skype": "gretas_DX_skype",
"Mobile_Phone": "(818) 555-6546",
"Birth_Date": "1977-11-22",
"Hire_Date": "1998-04-23"
}, {
"ID": 6,
"Head_ID": 3,
"Full_Name": "Brett Wade",
"Prefix": "Mr.",
"Title": "IT Manager",
"City": "Reno",
"State": "Nevada",
"Email": "brettw@dx-email.com",
"Skype": "brettw_DX_skype",
"Mobile_Phone": "(626) 555-0358",
"Birth_Date": "1968-12-01",
"Hire_Date": "2009-03-06"
}, {
"ID": 7,
"Head_ID": 5,
"Full_Name": "Sandra Johnson",
"Prefix": "Mrs.",
"Title": "Controller",
"City": "Beaver",
"State": "Utah",
"Email": "sandraj@dx-email.com",
"Skype": "sandraj_DX_skype",
"Mobile_Phone": "(562) 555-2082",
"Birth_Date": "1974-11-15",
"Hire_Date": "2005-05-11"
}, {
"ID": 8,
"Head_ID": 4,
"Full_Name": "Ed Holmes",
"Prefix": "Dr.",
"Title": "Sales Manager",
"City": "Malibu",
"State": "California",
"Email": "edwardh@dx-email.com",
"Skype": "edwardh_DX_skype",
"Mobile_Phone": "(310) 555-1288",
"Birth_Date": "1973-07-14",
"Hire_Date": "2005-06-19"
}, {
"ID": 9,
"Head_ID": 3,
"Full_Name": "Barb Banks",
"Prefix": "Mrs.",
"Title": "Support Manager",
"City": "Phoenix",
"State": "Arizona",
"Email": "barbarab@dx-email.com",
"Skype": "barbarab_DX_skype",
"Mobile_Phone": "(310) 555-3355",
"Birth_Date": "1979-04-14",
"Hire_Date": "2002-08-07"
}, {
"ID": 10,
"Head_ID": 2,
"Full_Name": "Kevin Carter",
"Prefix": "Mr.",
"Title": "Shipping Manager",
"City": "San Diego",
"State": "California",
"Email": "kevinc@dx-email.com",
"Skype": "kevinc_DX_skype",
"Mobile_Phone": "(213) 555-2840",
"Birth_Date": "1978-01-09",
"Hire_Date": "2009-08-11"
}, {
"ID": 11,
"Head_ID": 5,
"Full_Name": "Cindy Stanwick",
"Prefix": "Ms.",
"Title": "HR Assistant",
"City": "Little Rock",
"State": "Arkansas",
"Email": "cindys@dx-email.com",
"Skype": "cindys_DX_skype",
"Mobile_Phone": "(818) 555-6655",
"Birth_Date": "1985-06-05",
"Hire_Date": "2008-03-24"
}, {
"ID": 12,
"Head_ID": 8,
"Full_Name": "Sammy Hill",
"Prefix": "Mr.",
"Title": "Sales Assistant",
"City": "Pasadena",
"State": "California",
"Email": "sammyh@dx-email.com",
"Skype": "sammyh_DX_skype",
"Mobile_Phone": "(626) 555-7292",
"Birth_Date": "1984-02-17",
"Hire_Date": "2012-02-01"
}, {
"ID": 13,
"Head_ID": 10,
"Full_Name": "Davey Jones",
"Prefix": "Mr.",
"Title": "Shipping Assistant",
"City": "Pasadena",
"State": "California",
"Email": "davidj@dx-email.com",
"Skype": "davidj_DX_skype",
"Mobile_Phone": "(626) 555-0281",
"Birth_Date": "1983-03-06",
"Hire_Date": "2011-04-24"
}, {
"ID": 14,
"Head_ID": 10,
"Full_Name": "Victor Norris",
"Prefix": "Mr.",
"Title": "Shipping Assistant",
"City": "Little Rock",
"State": "Arkansas",
"Email": "victorn@dx-email.com",
"Skype": "victorn_DX_skype",
"Mobile_Phone": "(213) 555-9278",
"Birth_Date": "1986-07-23",
"Hire_Date": "2012-07-23"
}, {
"ID": 15,
"Head_ID": 10,
"Full_Name": "Mary Stern",
"Prefix": "Ms.",
"Title": "Shipping Assistant",
"City": "Beaver",
"State": "Utah",
"Email": "marys@dx-email.com",
"Skype": "marys_DX_skype",
"Mobile_Phone": "(818) 555-7857",
"Birth_Date": "1982-04-08",
"Hire_Date": "2012-08-12"
}, {
"ID": 16,
"Head_ID": 10,
"Full_Name": "Robin Cosworth",
"Prefix": "Mrs.",
"Title": "Shipping Assistant",
"City": "Los Angeles",
"State": "California",
"Email": "robinc@dx-email.com",
"Skype": "robinc_DX_skype",
"Mobile_Phone": "(818) 555-0942",
"Birth_Date": "1981-06-12",
"Hire_Date": "2012-09-01"
}, {
"ID": 17,
"Head_ID": 9,
"Full_Name": "Kelly Rodriguez",
"Prefix": "Ms.",
"Title": "Support Assistant",
"City": "Boise",
"State": "Idaho",
"Email": "kellyr@dx-email.com",
"Skype": "kellyr_DX_skype",
"Mobile_Phone": "(818) 555-9248",
"Birth_Date": "1988-05-11",
"Hire_Date": "2012-10-13"
}, {
"ID": 18,
"Head_ID": 9,
"Full_Name": "James Anderson",
"Prefix": "Mr.",
"Title": "Support Assistant",
"City": "Atlanta",
"State": "Georgia",
"Email": "jamesa@dx-email.com",
"Skype": "jamesa_DX_skype",
"Mobile_Phone": "(323) 555-4702",
"Birth_Date": "1987-01-29",
"Hire_Date": "2012-10-18"
}, {
"ID": 19,
"Head_ID": 9,
"Full_Name": "Antony Remmen",
"Prefix": "Mr.",
"Title": "Support Assistant",
"City": "Boise",
"State": "Idaho",
"Email": "anthonyr@dx-email.com",
"Skype": "anthonyr_DX_skype",
"Mobile_Phone": "(310) 555-6625",
"Birth_Date": "1986-02-19",
"Hire_Date": "2013-01-19"
}, {
"ID": 20,
"Head_ID": 8,
"Full_Name": "Olivia Peyton",
"Prefix": "Mrs.",
"Title": "Sales Assistant",
"City": "Atlanta",
"State": "Georgia",
"Email": "oliviap@dx-email.com",
"Skype": "oliviap_DX_skype",
"Mobile_Phone": "(310) 555-2728",
"Birth_Date": "1981-06-03",
"Hire_Date": "2012-05-14"
}, {
"ID": 21,
"Head_ID": 6,
"Full_Name": "Taylor Riley",
"Prefix": "Mr.",
"Title": "Network Admin",
"City": "San Jose",
"State": "California",
"Email": "taylorr@dx-email.com",
"Skype": "taylorr_DX_skype",
"Mobile_Phone": "(310) 555-7276",
"Birth_Date": "1982-08-14",
"Hire_Date": "2012-04-14"
}, {
"ID": 22,
"Head_ID": 6,
"Full_Name": "Amelia Harper",
"Prefix": "Mrs.",
"Title": "Network Admin",
"City": "Los Angeles",
"State": "California",
"Email": "ameliah@dx-email.com",
"Skype": "ameliah_DX_skype",
"Mobile_Phone": "(213) 555-4276",
"Birth_Date": "1983-11-19",
"Hire_Date": "2011-02-10"
}, {
"ID": 23,
"Head_ID": 6,
"Full_Name": "Wally Hobbs",
"Prefix": "Mr.",
"Title": "Programmer",
"City": "Chatsworth",
"State": "California",
"Email": "wallyh@dx-email.com",
"Skype": "wallyh_DX_skype",
"Mobile_Phone": "(818) 555-8872",
"Birth_Date": "1984-12-24",
"Hire_Date": "2011-02-17"
}, {
"ID": 24,
"Head_ID": 6,
"Full_Name": "Brad Jameson",
"Prefix": "Mr.",
"Title": "Programmer",
"City": "San Fernando",
"State": "California",
"Email": "bradleyj@dx-email.com",
"Skype": "bradleyj_DX_skype",
"Mobile_Phone": "(818) 555-4646",
"Birth_Date": "1988-10-12",
"Hire_Date": "2011-03-02"
}, {
"ID": 25,
"Head_ID": 6,
"Full_Name": "Karen Goodson",
"Prefix": "Miss",
"Title": "Programmer",
"City": "South Pasadena",
"State": "California",
"Email": "kareng@dx-email.com",
"Skype": "kareng_DX_skype",
"Mobile_Phone": "(626) 555-0908",
"Birth_Date": "1987-04-26",
"Hire_Date": "2011-03-14"
}, {
"ID": 26,
"Head_ID": 5,
"Full_Name": "Marcus Orbison",
"Prefix": "Mr.",
"Title": "Travel Coordinator",
"City": "Los Angeles",
"State": "California",
"Email": "marcuso@dx-email.com",
"Skype": "marcuso_DX_skype",
"Mobile_Phone": "(213) 555-7098",
"Birth_Date": "1982-03-02",
"Hire_Date": "2005-05-19"
}];
@Injectable()
export class Service {
getEmployees() {
return employees;
}
}
// 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.26.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@20.2.6',
'jszip': 'npm:jszip@3.6.0/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@0.10.3/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.0.18',
'devexpress-gantt': 'npm:devexpress-gantt@2.0.24',
'devextreme-angular': 'npm:devextreme-angular@20.2.6',
'preact': 'npm:preact@10.5.13/dist/preact.js',
'preact/hooks': 'npm:preact@10.5.13/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.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx-diagram.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>