Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
<template>
<div id="container">
<DxDiagram
id="diagram"
ref="diagram"
custom-shape-template="CustomShapeTemplate"
custom-shape-toolbox-template="CustomShapeToolboxTemplate"
@request-layout-update="onRequestLayoutUpdate"
>
<DxCustomShape
:type="'employee'"
:category="'employee'"
:base-type="'rectangle'"
:title="'New Employee'"
:default-width="1.5"
:default-height="1"
:toolbox-width-to-height-ratio="2"
:min-width="1.5"
:min-height="1"
:max-width="3"
:max-height="2"
:allow-edit-text="false"
/>
<template #CustomShapeTemplate="{ data }">
<CustomShapeTemplate
:employee="data.dataItem"
:edit-employee="editEmployee"
:delete-employee="deleteEmployee"
/>
</template>
<template #CustomShapeToolboxTemplate="{ data }">
<CustomShapeToolboxTemplate/>
</template>
<DxNodes
:data-source="dataSource"
:key-expr="'ID'"
:type-expr="itemTypeExpr"
:custom-data-expr="itemCustomDataExpr"
:parent-key-expr="'Head_ID'"
>
<DxAutoLayout :type="'tree'"/>
</DxNodes>
<DxContextToolbox
:shape-icons-per-row="1"
:width="100"
/>
<DxToolbox
:show-search="false"
:shape-icons-per-row="1"
>
<DxGroup
:category="'employee'"
:title="'Employee'"
:expanded="true"
/>
</DxToolbox>
<DxPropertiesPanel>
<DxTab>
<DxGroup
:title="'Page Properties'"
:commands="['pageSize', 'pageOrientation' , 'pageColor' ]"
/>
</DxTab>
</DxPropertiesPanel>
</DxDiagram>
<DxPopup
v-model:visible="popupVisible"
:drag-enabled="false"
:show-title="true"
:width="400"
:height="480"
title="Edit Employee"
>
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">Name</div>
<div class="dx-field-value">
<DxTextBox
v-model:value="currentEmployee.Full_Name"
:input-attr="{ 'aria-label': 'Full Name' }"
/>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Title</div>
<div class="dx-field-value">
<DxTextBox
v-model:value="currentEmployee.Title"
:input-attr="{ 'aria-label': 'Title' }"
/>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">City</div>
<div class="dx-field-value">
<DxTextBox
v-model:value="currentEmployee.City"
:input-attr="{ 'aria-label': 'City' }"
/>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">State</div>
<div class="dx-field-value">
<DxTextBox
v-model:value="currentEmployee.State"
:input-attr="{ 'aria-label': 'State' }"
/>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Email</div>
<div class="dx-field-value">
<DxTextBox
v-model:value="currentEmployee.Email"
:input-attr="{ 'aria-label': 'Email' }"
/>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Skype</div>
<div class="dx-field-value">
<DxTextBox
v-model:value="currentEmployee.Skype"
:input-attr="{ 'aria-label': 'Skype' }"
/>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Phone</div>
<div class="dx-field-value">
<DxTextBox
v-model:value="currentEmployee.Mobile_Phone"
:input-attr="{ 'aria-label': 'Phone' }"
/>
</div>
</div>
</div>
<div class="dx-fieldset buttons">
<DxButton
:text="'Update'"
:type="'default'"
@click="updateEmployee"
/>
<DxButton
:text="'Cancel'"
@click="cancelEditEmployee"
/>
</div>
</DxPopup>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import {
DxDiagram,
DxNodes,
DxAutoLayout,
DxCustomShape,
DxContextToolbox,
DxPropertiesPanel,
DxGroup,
DxTab,
DxToolbox,
} from 'devextreme-vue/diagram';
import { DxPopup } from 'devextreme-vue/popup';
import DxTextBox from 'devextreme-vue/text-box';
import DxButton from 'devextreme-vue/button';
import ArrayStore from 'devextreme/data/array_store';
import CustomShapeTemplate from './CustomShapeTemplate.vue';
import CustomShapeToolboxTemplate from './CustomShapeToolboxTemplate.vue';
import service from './data.ts';
let generatedID = 100;
const dataSource = new ArrayStore({
key: 'ID',
data: service.getEmployees(),
onInserting(values) {
values.ID = values.ID || (generatedID += 1);
values.Full_Name = values.Full_Name || "Employee's Name";
values.Title = values.Title || "Employee's Title";
},
});
const currentEmployee = ref({} as Record<string, any>);
const popupVisible = ref(false);
const itemTypeExpr = () => 'employee';
function itemCustomDataExpr(obj, value) {
if (value === undefined) {
return { ...obj };
}
Object.assign(obj, value);
return null;
}
function onRequestLayoutUpdate(e) {
for (let i = 0; i < e.changes.length; i += 1) {
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;
}
}
}
function editEmployee(employee) {
currentEmployee.value = {
Full_Name: '',
Prefix: '',
Title: '',
City: '',
State: '',
Email: '',
Skype: '',
Mobile_Phone: '',
...employee,
};
popupVisible.value = true;
}
function deleteEmployee(employee) {
dataSource.push([{ type: 'remove', key: employee.ID }]);
}
function updateEmployee() {
dataSource.push([{
type: 'update',
key: currentEmployee.value.ID,
data: { ...currentEmployee.value },
}]);
currentEmployee.value = {};
popupVisible.value = false;
}
function cancelEditEmployee() {
currentEmployee.value = {};
popupVisible.value = false;
}
</script>
<style scoped>
#diagram {
height: 725px;
}
.dx-popup-content {
padding: 0;
}
.dx-popup-content .dx-fieldset.buttons {
display: flex;
justify-content: flex-end;
}
.dx-popup-content .dx-fieldset.buttons > * {
margin-left: 8px;
}
</style>
<template>
<svg class="template">
<text
class="template-name"
x="50%"
y="20%"
>
{{ employeeName }}
</text>
<text
class="template-title"
x="50%"
y="45%"
>
{{ employeeTitle }}
</text>
<text
class="template-button"
x="40%"
y="85%"
@click="editEmployeeFunc"
>
Edit
</text>
<text
class="template-button"
x="62%"
y="85%"
@click="deleteEmployeeFunc"
>
Delete
</text>
</svg>
</template>
<script setup lang="ts">
const props = withDefaults(defineProps<{
employee: Record<string, any>
editEmployee: Function
deleteEmployee: Function
}>(), {
employee: () => ({}),
editEmployee: () => ({}),
deleteEmployee: () => ({}),
});
const employeeName = props.employee?.Full_Name || 'Employee\'s Name';
const employeeTitle = props.employee?.Title || 'Employee\'s Title';
const editEmployeeFunc = () => props.editEmployee(props.employee);
const deleteEmployeeFunc = () => props.deleteEmployee(props.employee);
</script>
<style>
#diagram .template .template-name {
font-weight: bold;
text-decoration: underline;
}
#diagram .template .template-title {
font-style: italic;
}
#diagram .template .template-button {
cursor: pointer;
font-size: 8pt;
fill: navy;
}
#diagram .template .template-button:hover {
text-decoration: underline;
}
</style>
<template>
<svg class="template">
<text
x="50%"
y="40%"
>
New
</text>
<text
x="50%"
y="70%"
>
Employee
</text>
</svg>
</template>
<script setup lang="ts">
// for SFC compiler
</script>
<style>
#diagram .template .template-name {
font-weight: bold;
text-decoration: underline;
}
#diagram .template .template-title {
font-style: italic;
}
</style>
window.exports = window.exports || {};
window.config = {
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader',
},
'*.ts': {
loader: 'demo-ts-loader',
},
'*.svg': {
loader: 'svg-loader',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
},
paths: {
'root:': '../../../../',
'npm:': 'https://unpkg.com/',
},
map: {
'vue': 'npm:vue@3.2.47/dist/vue.esm-browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.1/index.js',
'demo-ts-loader': 'root:utils/demo-ts-loader.js',
'svg-loader': 'root:utils/svg-loader.js',
'mitt': 'npm:mitt/dist/mitt.umd.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@24.1.6/cjs',
'devextreme-vue': 'npm:devextreme-vue@24.1.6/cjs',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.11/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme-vue': {
main: 'index.js',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.13/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
},
};
System.config(window.config);
const employees = [{
ID: 1,
Head_ID: 0,
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',
}];
export default {
getEmployees() {
return employees;
},
};
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
<!DOCTYPE html>
<html lang="en">
<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=5.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.6/css/dx-diagram.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.6/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<script src="https://unpkg.com/typescript@4.9.5/lib/typescript.js"></script>
<script type="module">
import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.4.16/dist/compiler-sfc.esm-browser.js";
window.vueCompilerSFC = vueCompilerSFC;
</script>
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.ts");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"> </div>
</div>
</body>
</html>
The customDataExpr property links custom employee information from the data source to diagram nodes. Changes made to data are reflected in the diagram's history. Undo and redo actions (available within the control's UI) allow users to rollback/reapply changes.
The CustomShapeToolboxTemplate property specifies the template used for a shape within the toolbox.