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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

fitToPage and scroll not working

Thread ID:





132993 Oct 3,2017 09:21 AM UTC Oct 4,2017 10:33 AM UTC JavaScript 1
Tags: ejDiagram
lotan amir
Asked On October 3, 2017 09:21 AM UTC


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 ?


Shyam G [Syncfusion]
Replied On 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 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon