This is a migrated thread and some comments may be shown as answers.
How to scroll to top position when user click next page?
4 Answers 78 Views
This is a migrated thread and some comments may be shown as answers.
Seeker
Top achievements
Rank 1
Seeker asked on 28 Jun 2018, 09:28 AM

````

$("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                    },
                    pageSize: 15
                },
                height:600,
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSize: 15,
                    pageSizes: [15,30,50,'all'],
                    buttonCount: 5
                },
                columns: [{
                    template: "<div class='customer-photo'" +
                    "style='background-image: url(https://demos.telerik.com/kendo-ui/content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                    "<div class='customer-name'>#: ContactName #</div>",
                    field: "ContactName",
                    title: "联系人",
                    width: 210
                }, {
                    field: "ContactTitle",
                    title: "职位"
                }, {
                    field: "CompanyName",
                    title: "公司"
                }, {
                    field: "Country",
                    title: "国家",
                    width: 150
                }]
            });

```````

4 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 02 Jul 2018, 05:46 AM
Hello, Seeker,

The desired result can be achieved by setting the scroll to 0 on the dataBound event:

dataBound: function(e) {
  var container = e.sender.wrapper.children(".k-grid-content"); // or ".k-virtual-scrollable-wrap"
  container.scrollLeft(0);
  container.scrollTop(0); // use only if virtual scrolling is disabled
},

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/databound 

I made an example demonstrating this:

https://dojo.telerik.com/iFOPIlin

I hope this is helpful.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Seeker
Top achievements
Rank 1
answered on 02 Jul 2018, 06:54 AM
Wow, very helpful , many thanks, Stefan , good job.
0
Josiah
Top achievements
Rank 1
answered on 22 Mar 2021, 07:44 PM

 this does not work if

 

                scrollable: {
                    virtual: true
                },

0
Mihaela
Telerik team
answered on 24 Mar 2021, 12:49 PM

Hi Josiah,

Thank you for reaching out.

This issue is a known limitation, as it is stated in the article below:

https://docs.telerik.com/kendo-ui/controls/data-management/grid/scrolling/virtual-scrolling#known-limitations

The top position of the current page couldn't be located, because the virtual scrolling relies on calculating the average row height based on already loaded data.

Let me know if you have any other queries and I would be happy to assist.


Regards, Mihaela Lukanova Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
Seeker
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Seeker
Top achievements
Rank 1
Josiah
Top achievements
Rank 1
Mihaela
Telerik team
Share this question
or