4 Answers, 1 is accepted
If you would like to show a loading indicator until the data is loaded inside the Kendo UI Diagram, what I can recommend is to enable the kendo.ui.progress just after the initalization of the widget. And, respectively, terminate it in the requestEnd event handler of the Kendo UI DataSource.
Here is an example of the same:
https://dojo.telerik.com/EqeToZEY
And the relevant code snippets:
$(document).ready(function(){ createDiagram(); kendo.ui.progress($("div#diagram"), true);}); dataSource: new kendo.data.HierarchicalDataSource({ requestEnd:function(){ kendo.ui.progress($("div#diagram"), false); },// . . .Let me know in case further assistance is required.
Kind regards,
Tsvetomir
Progress Telerik
Rank 1
Great, thanks, although I still have a bit of an issue. Modified the example to be a little closer to what I need it to do:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/diagram/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.uniform.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.uniform.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.2.619/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
</head>
<body>
<span id="buttonGO">Show Diagram</span>
<div id="example">
<div id="diagram"></div>
<script>
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: {
gradient: {
type: "linear",
stops: [{
color: dataItem.colorScheme,
offset: 0,
opacity: 0.5
}, {
color: dataItem.colorScheme,
offset: 1,
opacity: 1
}]
}
}
}));
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: "../content/dataviz/diagram/people/" + dataItem.image,
x: 3,
y: 3,
width: 68,
height: 68
}));
return g;
}
var ds = new kendo.data.HierarchicalDataSource({
transport:{
read:function(e){
setTimeout(function(){
e.success(data || []);
}, 1000);
}
},
schema: {
model: {
children: "items"
}
},
requestEnd:function(){
kendo.ui.progress($("div#diagram"), false);
}
})
function createDiagram() {
$("#diagram").kendoDiagram({
dataSource: ds,
layout: {
type: "layered"
},
shapeDefaults: {
visual: visualTemplate
},
connectionDefaults: {
stroke: {
color: "#979797",
width: 2
}
}
});
var diagram = $("#diagram").getKendoDiagram();
diagram.bringIntoView(diagram.shapes);
}
$('#buttonGO').bind('click', function() {
createDiagram();
kendo.ui.progress($("div#diagram"), true);
});
// $(document).ready(function(){
// createDiagram();
// kendo.ui.progress($("div#diagram"), true);
// });
</script>
</div>
</body>
</html>
Loads fine on the initial click, but subsequent clicks don't remove the progress indicators. I'm loading the data source initially in a tree, then flipping back and forth depending on what view the user wants to see. So after the initial load, the requestEnd fires out of order with the progress indicator, so it never gets removed.
Thank you for modifying the provided code snippets.
What actually happens is that the createDiagram() creates a new diagram. However, the data source to which it is bound is not recreated. Therefore, the new diagram is created but the data is bound to the old data source. What you can do is to simply erase the previously loaded data:
$('#buttonGO').bind('click', function() { ds.data([]); createDiagram(); kendo.ui.progress($("div#diagram"), true);});Here is the updated Dojo:
https://dojo.telerik.com/ITimIYev
It is important to point out that it is recommended to first destroy the existing diagram, empty the inner HTML. And only after that, create a new instance of the diagram. More information could be found here:
https://docs.telerik.com/kendo-ui/intro/widget-basics/destroy
Regards,
Tsvetomir
Progress Telerik
Rank 1