This code if pasted into a dojo works to build a diagram example.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/diagram/index">
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2019.1.220/styles/kendo.default.min.css" />
<script src="//kendo.cdn.telerik.com/2019.1.220/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="diagram"></div>
<script>
var data = [{
level: 0,
ordCode: "Org1",
orgName: "Org1 Level 0",
parentOrg: "",
items: [{
level: 1,
ordCode: "Org2A",
orgName: "Org2A Level 1",
parentOrg: "Org1"
},
{
level: 1,
ordCode: "Org2B",
orgName: "Org2B Level 1",
parentorg: "Org1"
},
{
level: 1,
ordCode: "Org2C",
orgName: "Org2C Level 1",
parentOrg: "Org1",
items:
[
{
level: 2,
ordCode: "Org3A",
orgName: "Org3A Level 2",
parentOrg: "Org2C"
},
{
level: 2,
ordCode: "Org3B",
orgName: "Org3B Level 2",
parentorg: "Org2C"
},
{
level: 2,
ordCode: "Org3C",
orgName: "Org3C Level 2",
parentOrg: "Org2C",
items:[]
},
{
level: 2,
ordCode: "Org3D",
orgName: "Org3D Level 2",
parentOrg: "Org2C"
},
]
},
{
level: 1,
ordCode: "Org2D",
orgName: "Org2D Level 1",
parentOrg: "Org1"
},
]
}];
function visualTemplate(options) {
var dataviz = kendo.dataviz;
var g = new dataviz.diagram.Group();
var dataItem = options.dataItem;
g.append(new dataviz.diagram.Rectangle({
width: 210,
height: 75,
stroke: {
width: 0
},
fill: {
gradient: {
type: "linear",
stops: [{
color: "green",
offset: 0,
opacity: 0.5
}, {
color: "green",
offset: 1,
opacity: 1
}]
}
}
}));
g.append(new dataviz.diagram.TextBlock({
text: dataItem.ordCode,
x: 85,
y: 20,
fill: "#fff"
}));
g.append(new dataviz.diagram.TextBlock({
text: dataItem.orgName,
x: 85,
y: 40,
fill: "#fff"
}));
return g;
}
function createDiagram() {
$("#diagram").kendoDiagram({
dataSource: new kendo.data.HierarchicalDataSource({
data: data,
schema: {
model: {
children: "items"
}
}
}),
layout: {
type: "layered"
},
shapeDefaults: {
visual: visualTemplate
},
connectionDefaults: {
stroke: {
color: "#979797",
width: 2
}
}
});
var diagram = $("#diagram").getKendoDiagram();
diagram.bringIntoView(diagram.shapes);
}
$(document).ready(createDiagram);
</script>
</div>
</body>
</html>
I would like to limit the number of shapes to a number (i.e. 2) per level. See attached image for example.
1 Answer, 1 is accepted
Hi, Cliff,
Thank you for the provided code snippet.
The diagram has several built-in layouts which you can use to arrange the shapes in a certain order.
You can find more information about the layout, layout type and layout subtype in the API documentation.
If you want to arrange the shapes in a custom way, you would have to change their X and Y coordinates manually.
I have prepared a dojo sample which demonstrates one way to move every 2 shapes downwards.
https://dojo.telerik.com/@gdenchev/EdaSAcol
I've left comments in the code for additional information.
Let me know if you have any questions.
Best Regards,
Georgi Denchev
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.