How to scroll to top position when user click next page?

3 posts, 0 answers
  1. Seeker
    Seeker avatar
    3 posts
    Member since:
    Jun 2018

    Posted 28 Jun 2018 Link to this post

    ````

    $("#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
                    }]
                });

    ```````

  2. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 02 Jul 2018 Link to this post

    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.
  3. Seeker
    Seeker avatar
    3 posts
    Member since:
    Jun 2018

    Posted 02 Jul 2018 in reply to Stefan Link to this post

    Wow, very helpful , many thanks, Stefan , good job.
Back to Top