Automatic Scrolling issue

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

Reply | Reply with quote

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:

<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:

<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

Reply | Reply with quote

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.

Reply | Reply with quote

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

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US