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.
Unfortunately, activation email could not send to your email. Please try again.

Swimlane Diagram horizontal offset not updating

Thread ID:

Created:

Updated:

Platform:

Replies:

132184 Aug 18,2017 04:35 AM Aug 23,2017 04:55 AM JavaScript 3
loading
Tags: ejDiagram
Alan Earp
Asked On August 18, 2017 04:35 AM

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 [Syncfusion]
Replied On August 21, 2017 08:47 AM

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 


Alan Earp
Replied On August 22, 2017 11:37 AM

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 [Syncfusion]
Replied On August 23, 2017 04:55 AM

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 


CONFIRMATION

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.

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.

;