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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Automatic Scrolling issue

Thread ID:

Created:

Updated:

Platform:

Replies:

149421 Nov 25,2019 11:52 PM UTC Dec 11,2019 06:08 AM UTC Angular - EJ 2 3
loading
Tags: Chart
Mark Erdrich
Asked On November 25, 2019 11:52 PM UTC

Hi,

We have two scenarios which are showing issues with scrolling.

In the first case, we have a series of ejs-lineargauge controls, each with a box and some text around them.  If we have enough controls active so the page requires scrolling, each time the user scrolls to the bottom, the page automatically scrolls back to the top when the graphs are updated.

 In the 2nd case, we have a chart object with a few other controls.  The chart object has live data constantly causing Series objects added and removed.  If the page is small enough to require scrolling, every time the list of Series is modified, the pages scrolls back to the top.

Our question is how can we prevent this from happening?

Thanks,

Mark



Srihari Muthukaruppan [Syncfusion]
Replied On November 28, 2019 03:47 AM UTC

Hi Mark,  
  
Please find the response for your queries. 
  
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  
Query #1: each time the user scrolls to the bottom, the page automatically scrolls back to the top when the graphs are updated? 

We have analyzed your query. When we update the linear gauge, we have removed the DOM and each time re-render the components. Once the component rendered, parent container size will be changed based on the size of the components. So, If the parent container element size is null, the Dom layout will get changed, and the scroll bar will be going to the top. But you can prevent this by setting the height for the parent container element.  

Code snippet: 
<div align='center' style="height: 450px;">  
        <ejs-lineargauge #gauge (loaded)='loaded($event)'>  
          // Other Codes  
    </ejs-lineargauge>  
  </div>  


Query #2: If the page is small enough to require scrolling, every time the list of Series is modified, the pages scrolls back to the top? 
  
You can refer the above scenario for chart also. 

Code snippet: 
<div align='center' style="height: 450px;"
        <ejs-chart #chart id='chart-container' [chartArea]='chartArea' [width]='width' align='center'  [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [zoomSettings]='zoomSettings' > 
        <e-series-collection> 
            <e-series [dataSource]='series1' type='Line' xName='x' yName='y' width=2 > 
            </e-series> 
        </e-series-collection> 
    </ejs-chart> 
    </div> 
  
 
  
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  
Let us know if you have any concerns. 
  
Regards, 
Srihari M 


Mark Erdrich
Replied On December 10, 2019 04:52 PM UTC

Sorry it took so long to get back to you, but Thank You!  This did solve the issues.

Srihari Muthukaruppan [Syncfusion]
Replied On December 11, 2019 06:08 AM UTC

Hi Mark,  

Most welcome. Kindly get in touch with us, if you requires further assistance. We are always happy in assisting you.   
   
Thanks,   
Srihari M 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon