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
$(() => {
function showToast(text) {
DevExpress.ui.notify({
position: {
at: 'top', my: 'top', of: '#diagram', offset: '0 4',
},
message: text,
type: 'warning',
delayTime: 2000,
});
}
$('#diagram').dxDiagram({
customShapes: [{
category: 'items',
type: 'root',
baseType: 'octagon',
defaultText: 'Development',
},
{
category: 'items',
type: 'team',
title: 'Team',
baseType: 'ellipse',
defaultText: 'Team Name',
},
{
category: 'items',
type: 'employee',
title: 'Employee',
baseType: 'rectangle',
defaultText: 'Employee Name',
}],
nodes: {
dataSource: new DevExpress.data.ArrayStore({
key: 'ID',
data: orgItems,
}),
keyExpr: 'ID',
textExpr: 'Name',
typeExpr: 'Type',
parentKeyExpr: 'ParentID',
styleExpr: itemStyleExpr,
autoLayout: {
type: 'tree',
},
},
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.ParentID !== undefined && e.changes[i].data.ParentID !== null) { e.allowed = true; }
}
},
onRequestEditOperation(e) {
const diagram = $('#diagram').dxDiagram().dxDiagram('instance');
if (e.operation === 'addShape') {
if (e.args.shape.type !== 'employee' && e.args.shape.type !== 'team') {
if (e.reason !== 'checkUIElementAvailability') { showToast("You can add only a 'Team' or 'Employee' shape."); }
e.allowed = false;
}
} else if (e.operation === 'deleteShape') {
if (e.args.shape.type === 'root') {
if (e.reason !== 'checkUIElementAvailability') { showToast("You cannot delete the 'Development' shape."); }
e.allowed = false;
}
if (e.args.shape.type === 'team') {
const connectorIds = e.args.shape.attachedConnectorIds;
for (let i = 0; i < connectorIds.length; i += 1) {
if (diagram.getItemById(connectorIds[i]).toId !== e.args.shape.id) {
if (e.reason !== 'checkUIElementAvailability') { showToast("You cannot delete a 'Team' shape that has a child shape."); }
e.allowed = false;
break;
}
}
}
} else if (e.operation === 'resizeShape') {
if (e.args.newSize.width < 1 || e.args.newSize.height < 0.75) {
if (e.reason !== 'checkUIElementAvailability') { showToast('The shape size is too small.'); }
e.allowed = false;
}
} else if (e.operation === 'changeConnection') {
const shapeType = e.args.newShape && e.args.newShape.type;
if (shapeType === 'root' && e.args.connectorPosition === 'end') {
if (e.reason !== 'checkUIElementAvailability') { showToast("The 'Development' shape cannot have an incoming connection."); }
e.allowed = false;
}
if (shapeType === 'employee' && e.args.connectorPosition === 'start') { e.allowed = false; }
} else if (e.operation === 'changeConnectorPoints') {
if (e.args.newPoints.length > 2) {
if (e.reason !== 'checkUIElementAvailability') { showToast('You cannot add points to a connector.'); }
e.allowed = false;
}
} else if (e.operation === 'beforeChangeShapeText') {
if (e.args.shape.type === 'root') {
if (e.reason !== 'checkUIElementAvailability') { showToast("You cannot change the 'Development' shape's text."); }
e.allowed = false;
}
} else if (e.operation === 'changeShapeText') {
if (e.args.text === '') {
if (e.reason !== 'checkUIElementAvailability') { showToast('A shape text cannot be empty.'); }
e.allowed = false;
}
} else if (e.operation === 'beforeChangeConnectorText') {
e.allowed = false;
}
},
contextToolbox: {
shapeIconsPerRow: 2,
width: 100,
shapes: ['team', 'employee'],
},
toolbox: {
shapeIconsPerRow: 2,
groups: [{ title: 'Items', shapes: ['team', 'employee'] }],
},
propertiesPanel: {
visibility: 'disabled',
},
});
function itemStyleExpr(obj) {
if (obj.Type === 'root') { return { fill: '#ffcfc3' }; }
if (obj.Type === 'team') { return { fill: '#b7e3fe' }; }
return { fill: '#bbefcb' };
}
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/24.2.3/js/dx-diagram.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx-diagram.min.css" />
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx.light.css" />
<script src="js/dx.all.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="data.js"></script>
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="diagram"> </div>
</div>
</body>
</html>
#diagram {
height: 600px;
}
const orgItems = [
{
ID: '106',
Name: 'Development',
Type: 'root',
},
{
ID: '107',
Name: 'WinForms Team',
Type: 'team',
ParentID: '106',
},
{
ID: '109',
Name: 'Javascript Team',
Type: 'team',
ParentID: '106',
},
{
ID: '110',
Name: 'ASP.NET Team',
Type: 'team',
ParentID: '106',
},
{
ID: '112',
Name: 'Ana Trujillo',
Type: 'employee',
ParentID: '107',
},
{
ID: '113',
Name: 'Antonio Moreno',
Type: 'employee',
ParentID: '107',
},
{
ID: '115',
Name: 'Christina Berglund',
Type: 'employee',
ParentID: '109',
},
{
ID: '116',
Name: 'Hanna Moos',
Type: 'employee',
ParentID: '109',
},
{
ID: '119',
Name: 'Laurence Lebihan',
Type: 'employee',
ParentID: '110',
},
{
ID: '122',
Name: 'Patricio Simpson',
Type: 'employee',
ParentID: '110',
},
{
ID: '123',
Name: 'Francisco Chang',
Type: 'employee',
ParentID: '110',
},
];