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

Swimlane Diagram horizontal offset not updating

I've got a swimlane diagram which renders OK, bu the only issue is that if it is a large one (wide) then it seems to want to centre the diagram in the viewport, whereas I'd rather it start from the left so you can see the swim lane names.
I've tried to update the offset to 1 then back to 0 (as it appears to be set to zero even though the scroll bar is not at zero with various methods as listed on https://help.syncfusion.com/js/diagram/scroll-settings
the scroll bars don't update, and it just always renders in the middle
Tried setting enableAutoScroll to true and/or false, no difference
Tried various settings for scrollSettings but it isn't making any difference

3 Replies

SG Shyam G Syncfusion Team August 21, 2017 12:47 PM UTC

Hi Alan, 
 
If you need to update the scrollbar initially, please use scrollSettings horizontalOffset and verticalOffset property to achieve your requirement. Also please use create event in which you can update the horizontal scrollbar to the center of the diagram. 
 
Code example: 
 
  $("#diagram").ejDiagram({ 
//define create event 
                    create:create, 
}); 
 
function create(args) {             
            var diagram = $("#diagram").ejDiagram("instance"); 
            diagram.model.scrollSettings.horizontalOffset = diagram.model.scrollSettings.viewPortWidth / 2; 
            diagram.update(diagram.model); 
        } 
 
 
Please use diagram client side fitToPage method to fit the diagram within the viewport. Please refer to the code example below and help documentation. 
 
Code example: 
    function fittopage() { 
            var diagram = $("#diagram").ejDiagram("instance"); 
            diagram.fitToPage(); 
        } 
 
 
Regards, 
Shyam G 



AE Alan Earp August 22, 2017 03:37 PM UTC

Hi,

I've tried both methods, but it doesn't work. my diagram is quite wide, see playground item below

http://jsplayground.syncfusion.com/ncvgjjki




SG Shyam G Syncfusion Team August 23, 2017 08:55 AM UTC

Hi Alan, 
 
Please use fitToPage method in which you set the mode as page and region as content to fit the diagram within the viewport based on the diagram elements. Please refer to the code example and modified playground link below. 
 
Code example: 
function createDiagram(args) { 
            var diagram = $("#diagram").ejDiagram("instance"); 
            diagram.fitToPage("page", "content"); 
        } 
 
 
Regards, 
Shyam G 


Loader.
Live Chat Icon For mobile
Up arrow icon