Swimlane Diagram horizontal offset not updating

[Alan Earp]

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

[Shyam G]

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); 

        } 

 

Help documentation: https://help.syncfusion.com/js/diagram/scroll-settings#define-scroll-status 

 

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(); 

        } 

 

Help documentation: https://help.syncfusion.com/api/js/ejdiagram#methods:fittopage 

 

Regards, 

Shyam G 

[Alan Earp]

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

[Shyam G]

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"); 

        } 

 

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

 

Regards, 

Shyam G