This is a migrated thread and some comments may be shown as answers.

Diagram scroll limit

3 Answers 187 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Michał
Top achievements
Rank 1
Michał asked on 04 Jul 2018, 09:20 AM

Hello,

When rendering a very big diagram in our application we found out that there is a scroll limit when using maximum zoom in the diagram. 

In the simple example below: max zoom to the first diagram element on the left and then by ctrl + left mouse click scroll to the right, around yellow shape you come to the limit and you cannot scroll anymore to the right.

The workaround is to zoomout to the initial position and zoom in again to the yellow element.

I found out that the limit of scrolling is around 20000px. Is there any way to change it or is there any workaround for this? I found a solution for this and I did my own scrolling mechanism and I can scroll on the diagram wherever I want with no limitations but then when using the kendoContextMenu on the diagram the function open() on this menu causes diagram to be scrolled back to the 20000px limit.

 

Example (without context menu but with the scroll limit):

https://dojo.telerik.com/AREcIrIk

 

 

3 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 06 Jul 2018, 07:20 AM
Hi Michal,

I investigated this a bit and found that the 20000px is a hard-coded size in the internal scroller of the Diagram. Currently, there is no public property or method to change this number, so my first suggestion would be to see if limiting the max zoom level would be an option in your scenario.
By default, the Diagram zooms up to 200% of the original size. If this is not required, you can set zoomMax to 1 (100%) or even a bit smaller number, e.g. 0.9 (90%). With 0.9, the Dojo sample can be zoomed successfully, but I do not know how big is your Diagram in original size:
https://dojo.telerik.com/AREcIrIk/2

Regards,
Tsvetina
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Michał
Top achievements
Rank 1
answered on 06 Jul 2018, 12:52 PM

Hi again,

Our diagram can be N x 20 000px, so in the worst scenario, the zoom level you suggested could be not enough to actually see anything in the diagram.

Is there any way to open the kendo context menu without using "open" method? For examply we try to open the context menu at 21 000px X-position and the diagram is scrolled back to 20 000px X-position. How to avoid it? Do I have to implement this menu without kendo built-in context menu mechanism and create my own custom context menu on the diagram?

0
Tsvetina
Telerik team
answered on 10 Jul 2018, 09:04 AM
Hi Michal,

The ContextMenu can either be opened by setting a target element (<g> for shapes) or by calling the open() method. If you have not tried with a target element, you can see this example:
Show Context Menu over Shapes

If it does not work with your custom scrolling, the best that I can suggest with the current Diagram implementation is to disable panning and use regular scrolling using a scrollbar, like shown in this example:
Using Scrollbar

I combined the two examples with the Dojo you sent me and opening the context menu works as expected:
https://dojo.telerik.com/AREcIrIk/3

If you would like, you can log a feature request to allow extending the Diagram plot area to more than 20000px and/or to calculate the max scroll width based on the Diagram content.

Regards,
Tsvetina
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Diagram
Asked by
Michał
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Michał
Top achievements
Rank 1
Share this question
or