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

Hide shape connectos permanently

3 Answers 170 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
Veteran
John asked on 30 Sep 2020, 09:37 AM

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.

3 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 02 Oct 2020, 07:32 AM

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:

I hope this helps.

 

Kind regards,
Tsvetomir
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

0
John
Top achievements
Rank 1
Veteran
answered on 02 Oct 2020, 08:12 AM

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.

0
Tsvetomir
Telerik team
answered on 06 Oct 2020, 08:00 AM

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:

Here is a sample project:

https://dojo.telerik.com/eSOsEgaj

 

Kind regards,
Tsvetomir
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Diagram
Asked by
John
Top achievements
Rank 1
Veteran
Answers by
Tsvetomir
Telerik team
John
Top achievements
Rank 1
Veteran
Share this question
or