Hide shape connectos permanently

[John]

I have a diagram which allows shapes to be dragged around, but when the user is zoomed out and hovers over the shape the connectoes appear and block the shape from being dragged. I actually do not need the connectors to be visible at all; so the best option is to hide them.

 

My code uses the following; as I also use drag and drop from a list box to add shapes to the diagram:

var shape = new Shape({ id: values.d.balls[i].id, x: values.d.balls[i].x, y: values.d.balls[i].y, type: "circle", content: { text: values.d.balls[i].name }, fill: { color: values.d.balls[i].colour } });
diagram.addShape(shape);

 

And when I use the shaopeDefault to try and alter the connectors the above method does not seem to use the shapeDefault at all; as I thought I may be able supply a zero length connectors or limit it to 1 connector. But if the shapeDefault option does not work I need another solution.

[Tsvetomir]

Hi John,

The connections of the Kendo UI Diagram are an essential part of the plotting mechanism of the widget. At present, there is no way to completely remove them, however, you can hide them. This can happen via the following option:

connectionDefaults: {
                    stroke: {
                        width: 0
                    }
                }

The end and start caps can be handled similarly via the following two options:

• https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram/configuration/connectiondefaults.startcap
• https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram/configuration/connectiondefaults.endcap

I hope this helps.

 

Kind regards,
Tsvetomir
Progress Telerik

[John]

Thanks for this, but it is actually the connectors I want to hide.

On the diagram I display I show only the shapes, then if a shape is clicked I will then show the connections for that shape only going to other shapes in diagram. Now the diagram I have has some 400+ shapes and the user zooms out quite a bit. Then they may want to drag a shape whilst zoomed out; when zoomed out far enough and the user hovers the mouse over the shape the connectors take up all the room over the shape. Meaning the dragging can not happen as this relys on the area not including the connectors to pick up the shape for the drag operartion.

Therefore I would like to hide the connectors. Any help would be most welcome, thanks.

[Tsvetomir]

Hi John,

Indeed, the connectors of the Kendo UI Diagram can be hidden using the same approach as with the connections. Namely, setting 0 pixels for the width and height options of the shape.connectors:

• https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram/configuration/shapes.connectors.height
• https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram/configuration/shapes.connectors.width

Here is a sample project:

https://dojo.telerik.com/eSOsEgaj

 

Kind regards,
Tsvetomir
Progress Telerik