placing the viewport at the center of a shape

6 posts, 1 answers
  1. Samuel
    Samuel avatar
    3 posts
    Member since:
    Jul 2018

    Posted 07 Aug 2018 Link to this post

    Hi!

    I want my viewport to be centered to one of the shape inside the diagram. I already saw that post: https://www.telerik.com/forums/how-to-make-the-shape-to-the-viewport%27s-center , maybe i miss something, but when i do it like that my shape isn't at all at the center (see the attach picture).

    i'm using these lines:

    var newShapeBinded = diagram.addShape(new Shape(shapes[i]), false);
    diagram.bringIntoView(newShapeBinded);

    Which shapes[i] is a valid JSON Shape.

     

    Thanks,
    Samuel

  2.
  3. Vessy
    Admin
    Vessy avatar
    2070 posts

    Posted 09 Aug 2018 Link to this post

    Hi Samuel,

    Passing a newly created shape to the bringIntoView() method of the diagram widget brought successfully the shape to the center of the view port at my end. You can take a look at the following sample dojo and see how it differs your actual configuration:
    https://dojo.telerik.com/ofezEken

    Regards,
    Vessy
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Samuel
    Samuel avatar
    3 posts
    Member since:
    Jul 2018

    Posted 09 Aug 2018 Link to this post

    Hello Vessy,

    Thank you for the quick answer! It seems that my problem was layout specific. Your Dojo really helped me understand what was wrong, I used a layered layout that I applied after the bringIntoShape function, which result in the wrong diagram disposition. The dojo http://dojo.telerik.com/ofezEken/3 is the solution that I made, Thanks again!

     

    For the matter, I encounter another bug with the diagram. Maybe it's not the right place to post this, but i'm going to take a shot anyway, stop me if it's beyond the purpose of the forum.

    I used my diagram inside of a tab, which when loaded from another tab (picture otherTab.jpg), the visual template don't load properly (picture tabDiagram.jpg). My diagram is inside an iframe which look like this:

    <iframe id="frameEtapes" src="./Request/RequestEditor.asp" style="height:620px;width:100%; pointer-events:none; overflow: hidden;"></iframe>

    What is weird is that when I load the frame from the right tab, it's loaded properly and all things are great, from the other tab, The visual template always ends up to have my two TextBlocks on top of the other. My visual template:

    layout.append(new dataviz.diagram.TextBlock({
        text: dataItem.title,
        fill: "#000"
    }));
    layout.append(new dataviz.diagram.TextBlock({
        text: dataItem.etapeID,
        fill: "#444"
    }));
    g.append(layout);
    layout.reflow();

     

    Regards,
    Samuel

  7. Answer
    Vessy
    Admin
    Vessy avatar
    2070 posts

    Posted 13 Aug 2018 Link to this post

    Hi Samuel,

    You are welcome, Samuel - I am glad the provided sample was helpful for you.

    As per your new question - this behavior is related to the fact that the diagram is placed inside initially not visible parent. Calling the diagram's redraw() and/or redrawVisual() method once the diagram is displayed, so the shapes can be rendered properly.

    On a side note, it will be highly appreciated if you open separate support threads for each issue your are experiencing so we can keep the topics consistent. Thank you in advance for your understanding.

    Regards,
    Vessy
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  8.
  9. Samuel
    Samuel avatar
    3 posts
    Member since:
    Jul 2018

    Posted 13 Aug 2018 in reply to Vessy Link to this post

    Hi Vessy,

    I'll check about redraw and redrawVisual in the next few days. you've been a really great help for my progress using Kendo UI Diagra.

    Of course! next time i'll open a separate thread and a big thanks for giving me your time.

    Regards,

    Samuel

  11. Vessy
    Admin
    Vessy avatar
    2070 posts

    Posted 13 Aug 2018 Link to this post

    Hi,

    You are more than welcome, Samuel - take your time needed for testing the diagram and let us know should you need any further assistance after that.

    Kind regards,
    Vessy
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top