We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

fitToPage and scroll not working


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 ?


1 Reply

SG Shyam G Syncfusion Team October 4, 2017 10:33 AM UTC

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.
Shyam G 

Live Chat Icon For mobile
Up arrow icon