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

Center the shapes and position the connectors to the top

4 Answers 154 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Naveen
Top achievements
Rank 1
Naveen asked on 20 Apr 2017, 03:15 AM
I have Circle as my first shape. But when I align the circle to the center by adding it in a rect layout the connector from the circle is still in the same position as it is now, pointing from nowhere. how do I align the Circle to center and the connector should also be from the center of the circle.?

I need the connectors at a fixed position on all shapes. eg. top-center. In the image I have attached you can see that the some connectors go to the side and some to the top. When there are more steps, its difficult to follow the flow and in most cases the connectors are overlapping. ie the from and to connector of a shape is merged together. how to make sure, I have different from and to connectors for each shape.? 

Any help is appreciated. thanks in advance. I hope this does not require any sample code.

4 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 21 Apr 2017, 03:30 PM

Hello,

I would suggest to take a look at the layout documentation that provides information about arranging the shapes. 

Also the viewPort method of the Kendo UI Diagram returns the bounds of the diagramming canvas. This might help you to find the coordinates of the center position and position the circle shape in the middle. 

Regards,
Boyan Dimitrov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Naveen
Top achievements
Rank 1
answered on 25 Apr 2017, 06:47 AM
Thanks @Boyan .. Another issue I am facing is, the diagram is not taking up the width of the parent div.. I am not able to give 100% and by default it takes 600px as width.. If I specify lesser width only half of the diagram is visible.. I also need to center the diagram to center of the parent div. How would I do that ? When I give bringInToView, since the width is 600px, it is not aligned to the center of the parent div.. Kindly help me out.. 
0
Naveen
Top achievements
Rank 1
answered on 25 Apr 2017, 07:25 AM
Please let me know from where does the div with class k-layer get its width.. ?
0
Accepted
Boyan Dimitrov
Telerik team
answered on 26 Apr 2017, 02:51 PM

Hello Naveen,

It takes it from the viewPort method or set them to 600 pixels as default value. 

Regards,
Boyan Dimitrov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Diagram
Asked by
Naveen
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Naveen
Top achievements
Rank 1
Share this question
or