placing the viewport at the center of a shape

[Samuel]

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

[Vessy]

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

[Samuel]

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

[Vessy]

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

[Samuel]

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

[Vessy]

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