Automatic Scrolling issue

[Mark Erdrich]

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]

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> 

  

Sample: https://stackblitz.com/edit/angular-cyjvhh-u9ged9?file=app.component.html 

 

  

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  

Let us know if you have any concerns. 

  

Regards, 

Srihari M 

[Mark Erdrich]

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

[Srihari Muthukaruppan]

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