1. I'm trying to create a process diagram using the kendoDiagram function. However, the labels for each node are not contained inside its shape's container. I tried several methods to break the line, but none seem to work. Is it possible to wrap the text of each node so it will fit inside its shape's container?
2. Another question, is it possible that on initial load I can give a shape a different color besides the one that is set in shapeDefaults? I am using dataSource and I assume that I can do something like:
{ id: "one", name: "C" width: 40, height: 40, type: "circle", fill: "red"}
I tried other property names like 'color' but it does not work.
Please see attached sample screenshot and the script I used.
Thanks!!
6 Answers, 1 is accepted
The first question seems to be the same as in this forum thread. Please check my reply there.
Binding the color is not currently supported. If a custom visual should not be used then other option that I can suggest is to use the shapes redraw method after they are created(updated example).
Regards,
Daniel
Telerik
Rank 1
Hello Matt,
I am not able to replicate any issues with the examples. Could you please explain what exactly does not work in each example?
Regards,Boyan Dimitrov
Telerik by Progress
Rank 1
I do not see the text wrapping in the updated example.
The labels looks awful in both Chrome and IE 11.
http://dojo.telerik.com/@SiliconSoul/AhuvO
I have attached a screenshot of what I'm seeing.
In the diagram api, there is a super simple example of how to wrap text.
http://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/diagram/how-to/text-wrapping
What is funny about the example is there is only one shape in the diagram.
There are no other shapes with wrapping text. There are no other shapes, period.
The example can hardly be called a "diagram".
What would be nice to see is the way(s) you can have shapes - different types of shapes and paths - that can wrap text and be connected to each other. I see no such examples for the Kendo UI diagram.
Rank 1
Arghhhh, this gets confusing.
So in one of your linked posts, http://www.telerik.com/forums/labels-are-not-wrapped-within-its-shape's-container, you have an example where the shapes have wrapped text.
http://dojo.telerik.com/@SiliconSoul/uzuQO
However, there is only one shape type used: a rectangle.
Does the setup in that example only allow for one shape?
And here is a different approach to creating a flowchart I found in the Kendo UI Cookbook (and have since modified). Using this type of setup, how would you be able to wrap text and connect shapes?
<!DOCTYPE html><html><head> <title>Cookbook - Fork of Flowchart</title> <meta charset="utf-8"> <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> <link href="../../styles/kendo.common.min.css" rel="stylesheet"> <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> <link href="../../styles/kendo.default.min.css" rel="stylesheet"> <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet"> <script src="../../js/jquery.min.js"></script> <script src="../../js/jszip.min.js"></script> <script src="../../js/kendo.all.min.js"></script> <script src="../content/shared/js/console.js"></script> <style type="text/css"> .k-diagram { height: 75vh; } </style></head><body><a class="offline-button" href="../index.html">Back</a><div id="diagram"></div><script> $('document').ready(function () { var diagram = $("#diagram").kendoDiagram({ connectionDefaults: { stroke: { color: '#222222' }, endCap: { type: 'ArrowEnd', fill: { color: "#222222" }, stroke: { color: "#222222", width: 2 } }, hover: { stroke: { color: "#02DA10", fill: "#02DA10" } } } }).getKendoDiagram(); function createShape(options) { var shape = new kendo.dataviz.diagram.Shape({ x: options.positionX, y: options.positionY, width: options.width || 100, height: options.height || 50, type: options.type, path: options.path || undefined, content: { text: options.textData || undefined, color: '#FFF' }, fill: options.fillColor || '#0088CC' }); return shape; } var shape1 = diagram.addShape(createShape({ 'textData': 'Yes', 'type': 'circle', 'positionX': 424.5, 'positionY': 20, 'fillColor': 'green', 'width': 50 } )); var shape2 = diagram.addShape(createShape({ 'textData': 'counter = 0', 'type': 'rectangle', 'positionX': 400, 'positionY': 125, 'height': 100, 'width': 100, 'path': 'M 50 0 100 50 50 100 0 50 Z' //'M 110 110 l100 -100 l100 100 l-100 100 l-100 -100' // rhombus } )); var shape3 = diagram.addShape(createShape({ 'textData': 'counter < 5', 'type': 'circle', 'positionX': 399.5, 'positionY': 290 } )); var shape4 = diagram.addShape(createShape({ 'textData': 'Stop', 'type': 'circle', 'positionX': 600, 'positionY': 390, 'fillColor': 'red' } )); var shape5 = diagram.addShape(createShape({ 'textData': 'Print (counter). Would you believe it? This is an amazing print counter, except the TEXT SHOULD WRAP.', 'type': 'rectangle', 'positionX': 200, 'positionY': 390 } )); var shape6 = diagram.addShape(createShape({ 'textData': 'counter++', 'type': 'rectangle', 'positionX': 200, 'positionY': 590 } )); diagram.connect(shape1, shape2); diagram.connect(shape2, shape3); diagram.connect(shape3.getConnector('Right'), shape4.getConnector('Top'), { points: [ new kendo.dataviz.diagram.Point(650, 215) ] }); diagram.connect(shape3.getConnector('Left'), shape5.getConnector('Top'), { points: [ new kendo.dataviz.diagram.Point(250, 215) ] }); diagram.connect(shape5, shape6); diagram.connect(shape6.getConnector('Bottom'), shape3.getConnector('Bottom'), { points: [ new kendo.dataviz.diagram.Point(250, 470), new kendo.dataviz.diagram.Point(450, 470) ] }); });</script></body></html>Hello Matt,
The reason why the shapes are rectangles is because a rectangle is created and added to the layout in the shapeDefaults.visual function. Please refer to the article for more information about the shapes that are available out of the box.
Regards,Boyan Dimitrov
Telerik by Progress