I have a diagram that has a group (the yellow part) and items in the group (the circles and rectangles)
I want to be able to scroll the right side while the group (the yellow shapes) remain at the start.
I also want to zoom in and out and the diagram should response accordingly.
I also want to be able to scroll vertically. in this case the whole diagram should scroll
Use two Diagrams, each with “ViewportBoundsChanged” listeners to modify the other diagram, protected by a flag to avoid recursion. Examples, although with a lot of stuff that you probably don’t need:
https://gojs.net/extras/timelineMonthly.html
https://gojs.net/extras/timelineYearly.html
https://gojs.net/extras/timelineInfinite.html
I can see the demo but I can not find the source code
As is the case for almost all of our samples, the complete source code is in the page itself. Just do a browser view page source command. Or prepend the URL with “view-source:”
thanks I will have a look
I look at that example
there is a problem when we scroll to the end of the diagrams and there is a horizontal scroll bar.
as you can see the items on both diagram are not aligned.
I am not sure what the solution is but maybe we can add disabled horizontal scroll bar also to the left diagram.
Try customizing the myRowHeaders Diagram with settings such as:
scrollMargin: new go.Margin(0, 0, 16, 0)
it almost work ,
now I can scroll to (almost to the end) and can see everything correctly as in that picture.
but as you can see I can scroll a little bit more.
and if I do that I get that picture
now the diagram are still not aligned
Did you apply the Diagram.scrollMargin setting to the correct Diagram?
sorry my bad (I did it on both diagrams).
but now another question sometimes I may not have horizontal scroll on the right diagram.
how would I know when to apply the margin propery?
I am asking this because if there is no horizontal scroll (depends on the data )
and the user scrolls on the right diagram than we still get the problem.
I am unable to reproduce any problem in that sample after setting myRowHeader.scrollMargin.
try to use the mouse wheel on the left diagram
OK, I have updated these two samples:
can you explain the solution?
I think I understand you solution.
when the zoom changes you change the height of the left diagram.
this is OK for zoom (or any ViewportBoundsChanged).
but in my case the user can change the diagram data (for example by filtering the data)
what is your suggestion in my case?
It works for me!!!
many thanks for all the help and patient.