This is a migrated thread and some comments may be shown as answers.

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

5 Answers 206 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Curt Rabon
Top achievements
Rank 1
Veteran
Curt Rabon asked on 25 Mar 2017, 03:24 PM

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?

5 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 28 Mar 2017, 03:37 PM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Simon
Top achievements
Rank 1
answered on 24 Feb 2020, 03:26 PM

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.

0
Nikolay
Telerik team
answered on 26 Feb 2020, 12:03 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Simon
Top achievements
Rank 1
answered on 27 Feb 2020, 01:25 PM

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.

 

0
Nikolay
Telerik team
answered on 02 Mar 2020, 08:05 AM

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: 

Let me know in case of further questions.

Regards,
Nikolay
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Curt Rabon
Top achievements
Rank 1
Veteran
Answers by
Boyan Dimitrov
Telerik team
Simon
Top achievements
Rank 1
Nikolay
Telerik team
Share this question
or