Make Diagram Take All Available Space
Environment
Created with version | 2017.3 913 |
Product | Progress® Kendo UI® Diagram for jQuery |
Description
How can I make the Diagram resize and take all space that is available in the container?
Solution
When the size of the container changes, call the resize()
method to adjust the size of the Diagram.
<table style="width: 100%">
<tr>
<td width=1>
<div style="width: 250px;" id="text">
Here we have some element. When this is hidden the should expand to fill all the available width on the page. Click below
to hide this text.
</div>
<p />
<h3>
<a id="toggleButton">Toggle</a>
</h3>
</td>
<td>
<div>
<div id="diagram"></div>
</div>
</td>
</tr>
</table>
<script>
function createDiagram() {
$("#diagram").kendoDiagram({
dataSource: {
data: diagramNodes(),
schema: {
model: {
children: "items"
}
}
},
layout: {
type: "tree",
subtype: "down",
horizontalSeparation: 30,
verticalSeparation: 20
},
shapeDefaults: {
width: 40,
height: 40
}
});
}
function diagramNodes() {
var root = { name: "0", items: [] };
addNodes(root, [3, 2, 2]);
return [root];
}
function addNodes(root, levels) {
if (levels.length > 0) {
for (var i = 0; i < levels[0]; i++) {
var node = { name: "0", items: [] };
root.items.push(node);
addNodes(node, levels.slice(1));
}
}
}
$(document).ready(function () {
$("#toggleButton").on("click", function () {
$("#text").toggle();
$("#diagram").data("kendoDiagram").resize();
});
createDiagram();
});
</script>