Scroll grid to top after changing page when using AJAX binding.

[Curt Rabon]

I've looked at the DevExpress HTML grid, and when switching pages when AJAX-bound, the vertical scroll is put to the top.  I don't know anyone who would want to stay vertically scrolled to the bottom when switching to another grid page.

When using Kendo AJAX-bound grid and switching pages, the vertical scrollbar stays where it was on the previous page.  Is this a bug or did you just let that be something we have to do ourselves?

[Boyan Dimitrov]

Hello Curt Rabon,

In some cases customers want to keep the scroll position if the page has large amount of items and they need to scroll back to the last position. An easy workaround would be to use the dataBound or page event of the Kendo UI Grid and reset the vertical scroll to the top position. 

Regards,
Boyan Dimitrov
Telerik by Progress

[Simon]

Resurrecting an old thread here but we're struggling with this as well. We're using a basic grid in an MVC project, bound to an AJAX datasource, we're not using virtual scrolling on the grid. 

I've checked out the dojo at https://dojo.telerik.com/iFOPIlin and it works great but can't duplicate same in our grid.

 

Grid is declared as:

 

    @(Html.Kendo().Grid<NSCC.Administration.Models.ActivityLogViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(c => c.ActivityTypeName).Title("Activity Type");
                columns.Bound(c => c.ObjectTypeName).Title("Object Type");
                columns.Bound(c => c.ObjectID).Title("Object ID");
                columns.Bound(c => c.Username).Title("Username");
                columns.Bound(c => c.Firstname).Title("Firstname");
                columns.Bound(c => c.Lastname).Title("Lastname");
                columns.Bound(c => c.ActivityDate).Format("{0:MM/dd/yyyy h:mm tt}").Title("Activity Date");
            })
            .Events(events =>
            {
                events.DataBound("onDataBound");
            })
            .ToolBar(toolbar =>
            {
                toolbar.Excel();
            })
            .Excel(excel => excel.AllPages(true))
            .Pageable()
            .Sortable(sortable => { sortable.SortMode(GridSortMode.SingleColumn); })
            .Filterable()
            .DataSource(dataSource => dataSource
                .Ajax()
                .ServerOperation(false)
                .Read("ActivityLog_Read", "ActivityLog")
                .PageSize(100)
                .Events(events =>
                {
                    events.Error("error_handler");
                })
            )
    )

 

OnDataBound() is:

 

        function onDataBound(e) {

            var container = e.sender.wrapper.children(".k-grid-content");
            container.scrollLeft(0);
            container.scrollTop(0); // use only if virtual scrolling is disabled

        }

 

We're referencing the 2020.1.114 build:

<script src="https://kendo.cdn.telerik.com/2020.1.114/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.aspnetmvc.min.js"></script>

 

Any suggestions?

Thanks.

[Nikolay]

Hi Curt,

Below I am posing my suggestion on how to cope with the case. 

In the DataBound event handler, you can bind the change event to the pager of the grid. And refresh the scroll only when the change comes from the pager. Otherwise, if it is in the DataBound event handler, then it would always scroll to top. Even if simple operations not related to the pager would trigger the DataBound.

    function onDataBound(e) {
        var grid = $("#grid").getKendoGrid();
        grid.pager.bind("change", function (e) {
            $(".k-grid-content").scrollTop(0);
        })
    }

Let me know if you have further questions.

Regards,
Nikolay
Progress Telerik

[Simon]

This line doesn't seem to do anything:

$(".k-grid-content").scrollTop(0);

I replaced it with:

                $('html, body').animate({
                    scrollTop: $("#nscc-ec-index").offset().top
                }, 10);

That seems to work ok.

 

[Nikolay]

Hi Curt,

I am glad to hear you have managed to resolve the situation and thank you for sharing the solution you came up with.

I am also sharing a working Dojo demo adapting the code I provided earlier so others could benefit from it: 

• https://dojo.telerik.com/aDICEjEZ

Let me know in case of further questions.

Regards,
Nikolay
Progress Telerik