1. Home
  2. Forum
  3. jQuery
  4. How to disable Auto scrolling of diagram content

How to disable Auto scrolling of diagram content

Hi there,
The content area of diagram is like infinity. I want limit area according to screen size, for that purpose I've used below code:
pageSettings: {
// pageBorderColor: "lightgray",
// pageBorderWidth: 1,
boundaryConstraints: ej.datavisualization.Diagram.BoundaryConstraints.Diagram,
pageWidth: 500,
pageHeight: 500,
scrollLimit: "limited",
scrollableArea: {
x: 0,
y: 0,
width: 0,
height: 0
}
},
It allows me to reduce page size and do not scroll the page. But because of it sometimes i face the issue that i can move node only horizontal direction. can not drag or move nodes any where in diagram

4 Replies
SG Shyam G Syncfusion Team December 11, 2017 05:49 AM UTC

Hi Ahman, 
 
Please set pageSettings scrollLimit as diagram to limit scrolling within the diagram. please refer to the code example, JSPlayground link and help documentation. 
 
Code example: 
        $("#diagram").ejDiagram({ 
            //limit scrolling within diagram 
            pageSettings: { scrollLimit: "diagram" },  
        }); 
 
 
 
Regards, 
Shyam G 


SG Shyam G Syncfusion Team December 11, 2017 07:09 AM UTC

Hi Ahman, 
 
Additional to our previous update, please refer to the below table in which we have explained the behavior of boundaryConstraints and scrollLimit properties. 
 
boundaryConstraints 
scrollLimit 
We use boundaryConstraints to define the interactive region of diagram elements. By default, the boundaryConstraints is infinite. 
 
Name 
Description 
Infinite 
No restriction in interact with the diagram elements 
Diagram 
The diagram elements can be interacted within the diagram model. 
Page 
The diagram elements can be interacted within the pageSize ie pageWidth and pageHeight. 
 
We use scrollLimit to define the scrollable region of the diagram. By default, scrollLimit is Diagram. 
 
Name 
Description 
Infinite 
AutoScroll occurs in diagram 
Diagram 
 We can scroll/move the scrollbar within the diagram.  
Limited 
We can scroll/move the scrollbar based on the width and height set in scrollableArea property. 
 
 
The boundaryConstraints and scrollLimit are different behavior.  In you code example, you have set boundaryConstraints as Diagram, so the nodes can be interacted within the diagram model. If you need an scrollbar to move within the certain limit, then you can use scrollLimit as Limited and specify the scrollableArea width and height. The scrollLimit limited works only if an scrollbar appears in diagram. so please go through the above behavior explained in the table and apply it based on your requirement. 
 
Regards, 
Shyam G 


AH ahman January 16, 2018 09:32 AM UTC

Hi there,
I applied above solution, it works fine, but there are two scenarios:
1. If press ctrl+scroll mouse then it increases or decreases diagram (zoom-in zoom-out) content size. can we disable this feature?
2. If i save diagram then load it again sometimes i see horizontal or vertical scroll, any solution?

Actually i want to have a limited area i.e screen size diagram area.
i don't want scrolling in any case nor scrollbars.
I don't want allow user to drag node out of diagram content.
I've modified above code and applied like below:

    $("#diagram").ejDiagram({
        width: "98%",
        height: "90%",
        pageSettings: {
            boundaryConstraints: ej.datavisualization.Diagram.BoundaryConstraints.Diagram,
            scrollLimit: "diagram",
        },
        defaultSettings: {
            node: {
                labels: [{
                    fontFamily: "Arial",
                    "fontColor": "black",
                    "fillColor": "white",
                    "borderColor": "white",
                    bold: true,
                    fontSize: 11,
                    offset: {
                        x: 0.5,
                        y: 0
                    },
                    margin: {
                        bottom: 9
                    }
                }],
            },
            connector: {
                labels: [{

                    fontFamily: "Arial",
                    "fontColor": "black",
                    "fillColor": "white",
                    bold: true,
                    fontSize: 11,
                    offset: {
                        x: 0.5,
                        y: 0.5
                    },
                }],
                lineWidth: 1,
            },
        }
    });

KU Kutraleeswaran Syncfusion Team January 17, 2018 02:02 PM UTC

Hi Ahman, 
 
Please find the responses to your queries as below. 
 
S.no 
Query 
Response 
1 
If press ctrl+scroll mouse then it increases or decreases diagram (zoom-in zoom-out) content size. can we disable this feature? 
Yes. It can be done by removing zoomable constraints from diagram model default constraints. Here is the code Snippet: 
Code Example: 
    $("#diagram").ejDiagram({ 
                constraints: ej.datavisualization.Diagram.DiagramConstraints.Default & ~ej.datavisualization.Diagram.DiagramConstraints.Zoomable, 
}); 
JS Playground Link: 
2 
If i save diagram then load it again sometimes i see horizontal or vertical scroll, any solution? 
  • We have created sample on our side based on your scenario.
JS Playground Link: 
  • We haven’t seen any scroll bar on loading the diagram content.
  • Could you please confirm whether the content of the diagram is beyond the viewport?
  • We have provided the video for your scenario:
 
 
 
 
Regards, 
Kutraleeswaran. 



Loader.
Up arrow icon