1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Grid scrolling to top and paging breaks everything

Grid scrolling to top and paging breaks everything

Having two issues with the grid I can't seem to shake.

1) The grid seems to be constantly redrawing, forcing the scrollbar back up to the top.

Data manager is really basic, loads about 2.5K records.

2) Enabling paging seems to break basically everything else. The filter buttons stop working, cant sort, etc.

all I'm adding is to the ejs-grid is allowPaging="true"

and adding

Anyone else seen anything similar and know how to resolve?


8 Replies
PG Praveenkumar Gajendiran Syncfusion Team August 2, 2021 11:59 AM UTC

Hi Cassandra, 
Thanks for contacting Syncfusion support. 
We checked your query, before proceeding with your query, we need the following information to understand your problem better at our end, please share the below details to validate further at our end. 
  
  1. Complete grid rendering code.
  2. Syncfusion package version used.
  3. Do you dynamically update the Grid dataSource?
  4. Please let us know, when do you enable the allowPaging property in the Grid?
  5. Let us know the replication procedure for reproducing the problem with Video demonstration to understand it better.
  6. If possible share us a simple sample to replicate the problem, It would be helpful to identify your problem case better so that we can check and provide the solution based on that
  7. Please elaborate on your reported issue.
  
Please get back to us with the requested details which will be helpful for us to understand your requirement at our end and provide the solution as early as possible 
  
Regards 
Praveenkumar G 


CA Cassandra August 2, 2021 07:09 PM UTC

1) 

<ejs-grid id="Grid" enableAdaptiveUI="true" height="100%"        allowSorting="true" allowSelection="false" allowFiltering="true" allowPaging="true"        allowReordering="true" showColumnChooser="true"        dataBound="dataBound"        toolbar="toolbarItems">        <e-data-manager url="/token/asjson" adaptor="WebApiAdaptor" offline="true" />        <e-grid-filterSettings type="Excel" />        <e-grid-searchsettings fields="@(new string[] { "Name","TokenText"})" />        <e-grid-pagesettings pageSize="10" pageSizes="true" />        <e-grid-columns>            <e-grid-column field="Id" headerText="Id" width="200" visible="false" isPrimaryKey="true"></e-grid-column>            <e-grid-column field="TokenImage" headerText="Image" width="150" allowFiltering="false" template="#colTemplate-TokenImage" ></e-grid-column>            <e-grid-column field="Name" headerText="Name" width="200" operator="contains" template="#colTemplate-TokenName"></e-grid-column>            <e-grid-column field="TokenText" headerText="Token Text" width="150" visible="false" operator="contains"></e-grid-column>            <e-grid-column field="Rarity" headerText="Rarity" width="150" type="string" hideAtMedia='(min-width: 768px)'></e-grid-column>            <e-grid-column field="Years" headerText="Years" width="150" operator="contains" hideAtMedia='(min-width: 768px)'></e-grid-column>            <e-grid-column field="Slots" headerText="Slots" width="150" operator="contains" hideAtMedia='(min-width: 768px)'></e-grid-column>            <e-grid-column field="UsableBy" headerText="Usable By" width="150" visible="false" operator="contains"></e-grid-column>            <e-grid-column field="Tags" headerText="Tags" width="150" visible="false" operator="contains"></e-grid-column>            <e-grid-column field="Updated" headerText="Updated" width="150" visible="false" type="date"></e-grid-column>        </e-grid-columns>    </ejs-grid>

These two templates are used in the code as well

<script id="colTemplate-TokenImage" type="text/x-template">    <div class="image">        <!--<a rel='nofollow' href="/tokens/${TokenDbUrl}">-->        <a rel='nofollow' href="${TokenDbUrl}">            <img src="https://cdn.tdcompanion.app/res/img/token/${ImageUrl}" width="128" alt="${Name}" />        </a>    </div></script>
<script id="colTemplate-TokenName" type="text/x-template">    <div>        <!--<a rel='nofollow' href="/tokens/${TokenDbUrl}">-->        <a rel='nofollow' href="${TokenDbUrl}" style="color: ${RarityColorLight};font-size:14;">            ${Name}        </a>    </div></script>

2) 19.2.0.49

3) depends on your definition of dynamic. using webapiadaptor with offline=true

4) xaml

5) attached

6) existing code sample seems simple enough? I'll attach my dataset as well. That plus templates should be enough to replicate. edit: nevermind. apparently 

7) see video for details. filtering/sorting stops working once paging is enabled. and the page is control is constantly redrawing causing scrolling to the top.



Attachment: asjson_7efa50f3.zip

CA Cassandra August 2, 2021 07:09 PM UTC

looks like uploading the json blew away the video. reuploading.


Attachment: 20210802_135245_9ef14555.7z

PG Praveenkumar Gajendiran Syncfusion Team August 3, 2021 12:34 PM UTC

Hi Cassandra, 
 
Thanks for your update. 
 
Based on your provided information, we have prepared a Grid sample and checked your reported issue, but we were not able to reproduce your reported issue at our end. For your convenience we have shared a video demonstration and sample for your reference, please check the below sample and video for more information,

Sample: https://www.syncfusion.com/downloads/support/forum/167740/ze/filter_core-176930821.zip

Video: https://www.syncfusion.com/downloads/support/forum/167740/ze/HOMEPA~2-1903910459.zip

Still if you are facing any difficulties, please share us a simple sample to replicate the problem or try to reproduce in the above provided sample. It would be helpful to identify your problem case better so that we can check and provide the solution based on that 

Regards 
Praveenkumar G 


DC Darin Cardin April 22, 2025 08:11 PM UTC

A lot of people are experiencing this issue where for some reason the grid is force focusing on the top of the page. 


SR Sivaranjani Rajasekaran Syncfusion Team April 23, 2025 01:50 PM UTC

Hi Darin Cardin,

 

We understand that you're encountering an issue where the Grid is unexpectedly forcing the page to scroll to the top. To investigate this further, we created a sample based on your description. However, we were unable to reproduce the issue on our end—the Grid behaves as expected.

 

Video Demo : 



Sample Link : Please find the sample attached.

 

Documentation Link : https://ej2.syncfusion.com/aspnetcore/documentation/grid/scrolling/scrolling

 

To better to assist you further, please share the below information:

1.                      Data Adaptor: In Syncfusion Grid remote data binding, various adaptors like UrlAdaptor, WebApiAdaptor, etc., are available. We have already documented how to connect these adaptors in our documentation. Please refer to the link  Documentation Link   

a.                In this Which data adaptor are you using? Please share the details of your adaptor, or if you are implementing custom logic, kindly share those details as well

2.                      Grid Configuration:  Share your complete Grid rendering code (client and server-side), so that we can review your initialization settings, implemented features, and how your backend is configured.

3.                Version Details: Kindly share the version of the Syncfusion NuGet packages and script files you are currently using. 

4.                Reproducible Sample: Please provide a sample that reproduces the issue, or modify the sample we shared to reflect the issue you're facing.

Once we have these details, we’ll be able to provide more specific guidance and assist you more efficiently.

We appreciate your cooperation and look forward to your response!



Attachment: CoreGridApp_WebAPI_391c1365.zip

DC Darin Cardin September 4, 2025 08:02 PM UTC

Hi, I have not looked at this for a while, sorry for the delay. this issue is reproduceable on your own example on the rowTemplate section. 

Row template in Angular Grid component | Syncfusion

  1. go to the first example, click the "Preview Sample", wait for the grid to load.
  2. after grid load, scroll to bottom of grid, then highlight the persons name in the bottom row. and press ctrl+c to perform a copy (Anne Dodsworth is the name I see)
  3. the grid will scroll to the top. 
Apologies for not including instructions last time.

Darin

SR Sivaranjani Rajasekaran Syncfusion Team September 5, 2025 11:25 AM UTC


Thank you for sharing the details.
We have reviewed your steps and understand that the issue occurs when attempting to copy text from a row in the Grid that uses the rowTemplate feature. Specifically, when you highlight a name in the bottom row and press Ctrl+C, the Grid scrolls to the top unexpectedly.
This behavior is due to a known limitation in the Syncfusion Angular Grid component. Clipboard actions, such as copy and paste, are not supported when using rowTemplate. This limitation is documented in our official guide under the "Limitations" section.


Please let us know if you need any further assistance.

Regards,
Sivaranjani R

Loader.
Up arrow icon