Scrolling the Report to the Bottom and Rightmost Side Automatically

Expected Effect

When you select Pagination Preview or Data Entry Preview for general reports, the report page may be relatively large due to the lack of pagination.

Sometimes, to view or enter the latest data conveniently, you need to scroll the report to the bottom and the rightmost side of the browser automatically after page loading, as shown in the following figure.

Implementation Method

To realize the effect, you can add a Loading End event to adjust the scrollbar positions upon report initialization.

Notes

1. This solution is only supported in general reports.

2. This solution is not supported in reports with frozen rows and columns. Otherwise, the solution does not take effect.

3. The Custom Scrollbar plugin is not supported in the solution. Otherwise, the solution does not take effect.

Template Preparation

1. Download the template Clicking the Button to Submit the Data into the Database.cpt.

Open the template and design the template style, as shown in the following figure.

2. Modify the SQL statement of the dataset ds1 to SELECT * FROM Product.

Adding a Loading End Event

Choose Template > Web Attribute > Data Entry Setting, select Set for This Template Separately in Following Settings, and add a Loading End event in Event Setting, as shown in the following figure.

The JavaScript code is as follows.

setTimeout(function(){
  var y=contentPane.$contentPane[0].scrollHeight;//Obtain the maximum height of the page.
  var y=contentPane.$contentPane[0].scrollHeight;//Obtain the maximum width of the page.
  contentPane.$contentPane.scrollLeft(x);//Set the leftmost position the scrollbar can reach.
  contentPane.$contentPane.scrollTop(y);//Set the top position the scrollbar can reach.
},100)

Note:

1. Since the page may not be fully initialized after page loading, you can use the delay function setTimeout(), which provides better compatibility.

2. The JS code is not supported in reports with multiple sheets.

Effect Display

Save the template and click Data Entry Preview. The following figure shows the preview effect on the PC.

Note:

1. If the desktop resolution is relatively high, the effect may not be visible. In this case, you can reduce the browser window size and refresh the page to see the effect.

2. The effect cannot be previewed on mobile terminals.

For details, you can download the template Scrolling the Report to the Bottom and the Rightmost Side Automatically After Report Loading by JS.cpt.