Diagram scroll

[Luis B.Chicaiza]

Hello,

I'm working with Diagram and i want to remove the diagram scrollbars, i want to use my container scroll, is there any way to disable diagram scrollbars? 

I'm setting the diagram height and width to a fixed pixel value.

Thanks

[Shyam G]

Hi Luis
Thanks for using Syncfusion products.

Please note that you can hide the diagram scrollbar by setting the CSS property visibility as hidden. However if you replace the diagram scrollbar with your container scroll, then you will have the following drawbacks

1.       When you perform zooming and the panning, then the diagram positioned in the negative axis(left and top position) cannot be seen without the scrollbar.

2.       When we set the node’s offset in the negative axis, then we cannot scroll and see that object without the scrollbar.

Please refer the video below for further reference.

Video:http://www.syncfusion.com/downloads/support/forum/119973/ze/drawbackvideo650821440

Please refer the code snippet below to hide the scrollbar

Code snippet:

style type="text/css">

        #diagram_canvas_hScrollbar{

            visibility:hidden;

        }

        #diagram_canvas_vScrollbar{

            visibility:hidden;

        }

    style

Note: diagram_canvas is the diagram Id.

Please let us know if you need further assistance.

Regards,
Shyam G

[Luis B.Chicaiza]

Hi Luis

Please ignore our previous update.

Please note that you can hide the diagram scrollbar by setting the CSS property visibility as hidden. However if you replace the diagram scrollbar with your container scroll, then you will have the following drawbacks

1.       When you perform zooming and the panning, then the diagram positioned in the negative axis(left and top position) cannot be seen without the scrollbar.

2.       When we set the node’s offset in the negative axis, then we cannot scroll and see that object without the scrollbar.

Please refer the video below for further reference.

Video:http://www.syncfusion.com/downloads/support/forum/119973/ze/drawbackvideo650821440

Please refer the code snippet below to hide the scrollbar

Code snippet:

<style type="text/css">

        #diagram_canvas_hScrollbar{

            visibility:hidden;

        }

        #diagram_canvas_vScrollbar{

            visibility:hidden;

        }
    </style>

Note: diagram  is the diagram Id.

Please let us know if you need further assistance.

Regards,
Shyam G

Hello, 

Thanks for your answer, well my issue really is that i have a backgroundImage 1800x1600, i want to set that background image to my diagram without scalling that image, i sent that question to forum and the answer was remove the attribute preserveAspectRatio. It didn't work because the image was resized in a wrong way, so, lets say, i have a container 800x600, there i want to locate a diagram with a backgroundImage 1800x1600, is there any way to get Syncfusion's scrollbars working without image scalling?

thanks

[Shyam G]

Hi Luis

Thanks for your update.

We have set an width and height of the backgroundImage which is higher than the viewport. Could you please look into the below video and confirm us whether it satisfies your requirement? if not please share us more details such as modify the below sample, screenshot or video. This will help us to verify further and provide a better solution to you.

Sample:http://www.syncfusion.com/downloads/support/forum/119973/ze/backgroundimagesample1856190855

Video: http://www.syncfusion.com/downloads/support/forum/119973/ze/backgroundimage2001103109

Please let us know if you need further assistance.

Regards,
Shyam G

[Luis B.Chicaiza]

Hi Luis

Thanks for your update.

We have set an width and height of the backgroundImage which is higher than the viewport. Could you please look into the below video and confirm us whether it satisfies your requirement? if not please share us more details such as modify the below sample, screenshot or video. This will help us to verify further and provide a better solution to you.

Sample:http://www.syncfusion.com/downloads/support/forum/119973/ze/backgroundimagesample1856190855

Video: http://www.syncfusion.com/downloads/support/forum/119973/ze/backgroundimage2001103109

Please let us know if you need further assistance.

Regards,
Shyam G

Hi Shyam,

Thanks for your feedback,

I was trying your approach (Set diagram height and width to a fixed size, and set PageSettings.PageHeight and PageSettings.PageWidth to the image size.) What i got you can see it in the picture SYNC_WRONG_SIZE.PNG, i'm attaching SYNC_OK_SIZE.PNG to let you see what i need. In the OK_SIZE picture, i'm setting the diagram height and width to the image size, so, in that case, it is using the container scrollbars, the Syncfusion's scrollbars haven't been used. I want to use Syncfusion's scrollbars to get working scroll when zooming.

Thanks

Attachment: SYNCFUSION_RESULT_7bc39e21.zip

[Swarnesh Krishna Kumar]

Hi Luis,
Thanks for your update.
If your intention is to scaling the image in the diagram while zooming means, we suggest you to use the ScrollChange event in order to achieve your requirement. If we misunderstood your requirement could you please provide us more information regarding your requirement which will help us to analyze further and provide you a better solution at the earliest?
We have attached the sample for your reference.
Here is the sample:
http://www.syncfusion.com/downloads/support/forum/119973/ze/FitTopage-2057583744
Please let us know if any concern.
Regards,
Swarnesh K