fitToPage and scroll not working

[lotan amir]

hi,

i am creating dynamic swimlane. 

after adding all lanes, nodes and connectors, the swimlane can be very wide in some cases (and one phase in other)

in order to see all swimlane i use fit to page like this:

var diagram = $("#diagram").ejDiagram("instance");

diagram.fitToPage("page", "content");

the swimlane zoom out and you can see th emost of it

but, if it is very wide the scrool and the diagram is centered

i am tring to put the duagram on the top left position of the page/viewport without succed.

i tried to change the scroll offset but the position of the diagram is changing so the scroll is not relavent 

is there a way to put the diagram on the top left of the view and set the scroll to see it ?

thanks

[Shyam G]

Hi Lotan, 

 

• We suspect that the swimlane content is moved in an negative value based on its offsetX and width value as shown in the below playground link. So only the swimlane content in negative axis is outside of viewport and the scrollbar moved to 0,0 position without considering the negative values.
• To move the scrollbar to the initial position, please take diagram bounds and set bounds x and y value to the scrollSettings horizontalOffset and verticalOffset property respectively using diagram client side update method. Please refer to the code example and playground link below

Code example: 

               function FitToPage() { 

                  var diagram = $("#diagram").ejDiagram("instance"); 

                  for (i = 0; i < diagram.model.nodes.length; i++) { 

                      var node = diagram.model.nodes[i]; 

                      //check whether an node is swimlane 

                      if (node.isSwimlane) { 

                        //bounds for an swimlane 

                        var bounds = ej.datavisualization.Diagram.Util.bounds(node); 

                        //update x and y value to horizontal offset and vertical offset 

                        diagram.update({ scrollSettings: { horizontalOffset: bounds.x, verticalOffset: bounds.y } }); 

                    } 

                 } 

                 diagram.fitToPage("page", "content"); 

  } 

• If we misunderstood your requirement, please share us more details such as explain your requirement with screenshot or modify the below sample and explain your problem with video.

 

Playground link: http://jsplayground.syncfusion.com/fagbmmrw 

 

Regards, 

Shyam G