Wrap Text in the Diagram
Environment
| Product | Progress® Kendo UI® Diagram for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I make long chunks of text fit in a shape of the Kendo UI for jQuery Diagram?
Solution
The following example demonstrates how to use the Layout element to make long chunks of text fit in a shape.
The
Layoutelement is available as of the Kendo UI Q3 2015 (2015.3.x) release.
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
dataSource: new kendo.data.HierarchicalDataSource({
data: [{
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis ac rutrum quis, varius a velit. Donec lacus erat, cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra accumsan pharetra, mi ligula cursus felis, ac aliquet leo diam eget risus. Integer facilisis, justo cursus venenatis vehicula, massa nisl tempor sem, in ullamcorper neque mauris in orci."
}]
}),
shapeDefaults: {
visual: visualTemplate
}
});
function visualTemplate(options) {
var diagram = kendo.dataviz.diagram;
var dataItem = options.dataItem;
var group = new diagram.Group();
group.append(new diagram.Rectangle({
width: 300,
height: 200,
stroke: {
width: 0
},
fill: "#e8eff7"
}));
group.append(new diagram.Rectangle({
width: 8,
height: 200,
fill: "#3399cc",
stroke: {
width: 0
}
}));
var layout = new diagram.Layout(new diagram.Rect(15, 0, 280, 200), {
alignContent: "center",
spacing: 4
});
group.append(layout);
var texts = dataItem.text.split(" ");
for (var i = 0; i < texts.length; i++) {
layout.append(new diagram.TextBlock({
text: texts[i]
}));
}
layout.reflow();
return group;
}
</script>