Problem with Virtual Scrolling in IE8 and IE9

[Ronald]

Hi,

I'm having a problem with Virtual Scrolling in IE8 and IE9.

This is my scenario:
1. I created a grid with several thousands of records and enabled Virtual Scrolling on it.
2. I also created a filter (textbox) and a filter method to send additional parameters to the server
3. When I initially scroll to the bottom of the grid, the last page of data is shown as expected.
4. Now when I enter filter data that would return less than the number of pages with data than the page currently shown, the data is not shown in the grid

Investigating the issue, showed me the following:
* In other browsers (tested with IE11, Chrome and Firefox), after the filtering first an empty response is returned which is immediately followed by a second request for the first page of data, as expected
* In IE8 and IE9 (the only 2 browsers that I've tested this issue in) this second request is not performed, showing no data nor scrollbar, as if there were no data present at the server.

I've attached a sample ASP.NET MVC project using Kendo UI 2014.1.318.440 that shows the problem.

[Rosen]

Hello Ronald,

The cause for the issue you are observing is incorrect filtering logic. In the provided sample the data is manually filtered before it is processed by ToDataSourceResult routine. However, as the paging instructions are still present when this occurs, the ToDataSourceResult will try to page the filtered data set. Which in the case where the current page index is outside of the actual available data will yield empty result.

There are few ways to correct this. You may manually reset the page index when filter button is clicked:

$(function() {
    $("#btnFilter").bind("click", function() {
        var grid = $("#grid").data('kendoGrid');
        grid.dataSource.page(1);
    });
});

function filter() {
    return {
        FilterBy: $("#filterBy").val()
    };
}

Or use the DataSource filter method to apply the filtering:

<script type="text/javascript">
    $(function() {
        $("#btnFilter").bind("click", function() {
            var grid = $("#grid").data('kendoGrid');
            grid.dataSource.filter({ field: "Title", operator: "contains", value: $("#filterBy").val() });
        });
    });
</script>

public ActionResult VirtualScrolling_Read([DataSourceRequest] DataSourceRequest request/*, string FilterBy*/)
{
    var data = new List<VirtualScrollingModel>();

    for (var i = 0; i < Pages * PageSize; i++)
    {
        data.Add(new VirtualScrollingModel{Id = i, Title = string.Format("Title {0:D5}", i)});
    }

    //if (FilterBy != null)
    //{
    //    data = data.Where(m => m.Title.Contains(FilterBy)).ToList();
    //}

    return Json(data.ToDataSourceResult(request));
}

Regards,
Rosen
Telerik

 

 

[Ronald]

Hi Rosen,

Thanks for your reply.

I've tried the first suggestion, but it shows some weird unexpected behavior.
When I scroll down in the grid and use the filter to return a limited set of data, it shows the first page of results, but the scrollbar is still positioned at the bottom of the grid so I cannot scroll down to the next page of results. I need to first scroll up and down again to trigger a new page of data to be retrieved. The result is not the second page, but the one but last page of results to be shown. It also shows this behavior in the latest version of Chrome.

The second suggestion shows the same behavior. Thereby this solution doesn't work in our case as the filter parameters are passed to a back-end service which returns the filtered data from the database to reduce server load.

The original code works as expected in every browser except IE8 and IE9.
I also see that after the filtering and requesting an out of bound page, every browser automatically forces a new request of the first page of data. IE8 and IE9 don't show this behavior.

I'v attached a few screenshots to show what's happening in Chrome and IE9 so you can see the difference.

Kind regards,
Ronald

[Rosen]

Hi Ronald,

The behavior you are experiencing with your original code actually is a side-effect of how some browsers handle changing the height of a scrollable container's children. It seems that in Chrome a scroll event will be raised when scrollbar is not required which will not happen in IE8. You can verify this in this jsbin test page.

However, as I have mentioned in my previous message the server logic is not correct as it should not return empty result set and depend on the browser to issue new request with the correct page index. Therefore, you should consider the suggestions from my previous reply, or maybe consider using custom binding and handle the data processing on the server yourself.

Regarding my first suggestion from my initial reply and the behavior you have described, you may also need to manually reset the scroll position, similar to the following:

$("#btnFilter").bind("click", function () {
    var grid = $("#grid").data('kendoGrid');
    grid.virtualScrollable.verticalScrollbar[0].scrollTop = 0;
    grid.dataSource.page(1);
});

Regards,
Rosen
Telerik

 

 

[Robert]

I have just seen this post after I created another thread, but the issue appears to be the same.  I see the scroll position issue using Chrome v33.0.1750.146.

Please see my other post for the plunker example:

http://www.telerik.com/forums/scroll-position-not-updating-when-filter-applied-and-virtual-scrolling-is-enabled

[Rosen]

Hi Robert,

I'm afraid that the the behavior you have described is not related to the one discussed  in this thread. As you may know the scrollbar positioning is not adjusted when DataSource is manipulated via its API. It is "oneway" connection only - the scrollbar controls data which should be loaded by the DataSource, however the DataSource cannot set the scrollbar position as it is nearly impossible to predict what the scrollbar position should be.

Thus, in the Ronald's scenario, it is required to manually set the position of the scrollbar when setting the current page index.
 
Regards,
Rosen
Telerik

 

 

[Robert]

Hi Rosen,

No problem, I understand the complexity. As I mentioned just now in the other thread that without pageSize and virtual scrolling the whole thing works as expected, as in a change in filter or bound data causes the scrollbar to update correctly.  I assume that is because all of the records are present, and it is much harder with pages, however the difference of experience between the two modes of operation is quite clear.

If there is nothing obvious that can be done from the kendo source it means that anyone using the grid in this way has to manage the scroll positions in a much more manual way.

Thanks,
Rob.

[Ronald]

Hi Rosen,

If I understand your reply correctly, the behavior shown in all browsers happens by accident, and the behavior in IE8/9 is the correct behavior? Whether this is true or not, I don't agree that I should be responsible for the paging of the grid as your solutions suggest.

It is perfectly valid for the server logic to return an empty result set when the underlying datasource changed. I don't know, and I don't care how many results my query returns and which page of this result set is shown in the grid, the grid should take care of that.

Also, the grid should be perfectly able to detect that the page index is out of bound and automatically show a valid page (be it the first or last) as the response returns the data (none) and the number of results in the data set (155) as the sample output below shows:

{"Data":[],"Total":155,"AggregateResults":null,"Errors":null}

Kind regards,
Ronald

[Rosen]

Hello Ronald,

As I have explained previously, the DataSource is displaying the result returned by the server. As this result contains no data this is what DataSource is populated with and the Grid will be displaying. As I have already mentioned, the page index will be automatically reset if filtering is made via the DataSource API. However, as in your scenario the server code will execute the ToDataSourceResult with "invalid" parameters for the provided data, due to the fact that it is filtered manually and the requested page index is not valid any more, the DataSource does not have the "business" knowledge to recover for such state. Therefore, this fall to the developer to determine what the appropriate action should be in this case and to add the required logic to handle it.

Regards,
Rosen
Telerik

 

 

[Ronald]

Hi Rosen,

I understand your explanation, but I don't understand why there are no scrollbars shown as the client is told that the N-th page is shown.

And I don't understand why the behavior is different between different browsers and versions.


Kind regards,
Ronald

[Rosen]

Hello Ronald,

Actually, there is no scrollbar as there is not data to be displayed. If you want to issue a second request if data for the page is gone, this can be implemented via change event of the DataSource, similar to the following:

    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(100)
        .Events(events => events.Change("change"))
        .Read(read => read.Action("VirtualScrolling_Read", "VirtualScrolling").Data("filter"))
     )


<script type="text/javascript">
    function change() {
        if (this.totalPages() < this.page()) {
            var grid = $("#grid").data('kendoGrid');
            grid.virtualScrollable.verticalScrollbar[0].scrollTop = 0;
            this.page(1);
        }
    }
</script>

Regards,
Rosen
Telerik