<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://kendo.cdn.telerik.com/themes/11.0.2/default/default-main.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="configurator">
<div class="box-col">
<h4>Export diagram content</h4>
<div class="box-col">
<button class='export-pdf'>Export as PDF</button>
</div>
<div class="box-col">
<button class='export-img'>Export as Image</button>
</div>
<div class="box-col">
<button class='export-svg'>Export as SVG</button>
</div>
</div>
</div>
<div class="demo-section wide">
<div id="diagram"></div>
</div>
<script>
$(".export-pdf").click(function() {
var diagram = $("#diagram").getKendoDiagram();
diagram.exportPDF({ paperSize: "auto", margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" } }).done(function(data) {
kendo.saveAs({
dataURI: data,
fileName: "diagram.pdf",
proxyURL: "https://demos.telerik.com/service/v2/core/export"
});
});
});
$(".export-img").click(function() {
var diagram = $("#diagram").getKendoDiagram();
diagram.exportImage().done(function(data) {
kendo.saveAs({
dataURI: data,
fileName: "diagram.png",
proxyURL: "https://demos.telerik.com/service/v2/core/export"
});
});
});
$(".export-svg").click(function() {
var diagram = $("#diagram").getKendoDiagram();
diagram.exportSVG().done(function(data) {
kendo.saveAs({
dataURI: data,
fileName: "diagram.svg",
proxyURL: "https://demos.telerik.com/service/v2/core/export"
});
});
});
function createDiagram() {
var data = [{
firstName: "Antonio",
lastName: "Moreno",
image: "antonio.jpg",
title: "Team Lead",
colorScheme: "#1696d3",
items: [{
firstName: "Elizabeth",
image: "elizabeth.jpg",
lastName: "Brown",
title: "Design Lead",
colorScheme: "#ef6944",
items: [{
firstName: "Ann",
lastName: "Devon",
image: "ann.jpg",
title: "UI Designer",
colorScheme: "#ef6944"
}]
}, {
firstName: "Diego",
lastName: "Roel",
image: "diego.jpg",
title: "QA Engineer",
colorScheme: "#ee587b",
items: [{
firstName: "Fran",
lastName: "Wilson",
image: "fran.jpg",
title: "QA Intern",
colorScheme: "#ee587b"
}]
}, {
firstName: "Felipe",
lastName: "Izquiedro",
image: "felipe.jpg",
title: "Senior Developer",
colorScheme: "#75be16",
items: [{
firstName: "Daniel",
lastName: "Tonini",
image: "daniel.jpg",
title: "Developer",
colorScheme: "#75be16"
}]
}]
}];
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: dataItem.colorScheme
}));
g.append(new dataviz.diagram.TextBlock({
text: dataItem.firstName + " " + dataItem.lastName,
x: 85,
y: 20,
fill: "#fff"
}));
g.append(new dataviz.diagram.TextBlock({
text: dataItem.title,
x: 85,
y: 40,
fill: "#fff"
}));
g.append(new dataviz.diagram.Image({
source: "https://demos.telerik.com/kendo-ui/content/dataviz/diagram/people/" + dataItem.image,
x: 3,
y: 3,
width: 68,
height: 68
}));
return g;
}
$("#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);
$(document).bind("kendo:skinChange", createDiagram);
</script>
</div>
</body>
</html>