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. Image for the cookie policy date

Diagram scroll

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

5 Replies

SG Shyam G Syncfusion Team August 20, 2015 12:15 PM UTC

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


LB Luis B.Chicaiza replied to Shyam G August 20, 2015 07:31 PM UTC

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


SG Shyam G Syncfusion Team August 21, 2015 02:09 PM UTC

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


LB Luis B.Chicaiza replied to Shyam G August 21, 2015 07:23 PM UTC

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


SK Swarnesh Krishna Kumar Syncfusion Team August 24, 2015 12:16 PM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon