$(function() {
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",
autoLayout: {
type: "tree"
}
},
onRequestLayoutUpdate: function(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.ParentID !== undefined && e.changes[i].data.ParentID !== null)
e.allowed = true;
}
},
onRequestEditOperation: function(e) {
var 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") {
for(var i = 0; i < e.args.shape.attachedConnectorIds.length; i++) {
if(diagram.getItemById(e.args.shape.attachedConnectorIds[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") {
var 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"
}
});
});
<!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" />
<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/20.2.5/js/dx-diagram.min.js"></script>
<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" />
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx-diagram.css" />
<script src="https://cdn3.devexpress.com/jslib/20.2.5/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;
}
var 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"
}
];