Center the shapes and position the connectors to the top

5 posts, 1 answers
  1. Naveen
    Naveen avatar
    3 posts
    Member since:
    Apr 2017

    Posted 19 Apr Link to this post

    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.
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1966 posts

    Posted 21 Apr Link to this post

    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.
  3. Naveen
    Naveen avatar
    3 posts
    Member since:
    Apr 2017

    Posted 25 Apr in reply to Boyan Dimitrov Link to this post

    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.. 
  4. Naveen
    Naveen avatar
    3 posts
    Member since:
    Apr 2017

    Posted 25 Apr in reply to Naveen Link to this post

    Please let me know from where does the div with class k-layer get its width.. ?
  5. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1966 posts

    Posted 26 Apr Link to this post

    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.
Back to Top