This is a migrated thread and some comments may be shown as answers.

Kendo Diagram - wrapping labels and individual shape color without using visual template

6 Answers 520 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Justin asked on 25 Nov 2015, 01:41 AM

labels-not-wrapped-inside-the-shape.zip

Hi,

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

answered on 25 Apr 2017, 02:59 PM

kendo-diagram-text-not-wrapped.png

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.

answered on 25 Apr 2017, 06:37 PM

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>