There seems to be a bug when filtering the grid with virtual scrolling. Everything works fine if I apply the filter before scrolling through the grid.
Now failed scenario:
1. Scroll to the very bottom of the grid.
2. Apply filter.
Result - nothing shows up. Unless you scroll, then the records magically appear. Setting skip to 0 after filtering does nothing, skip = 1 works sometimes.
Fun fact: if filtered item list does not exceed the maximum number of rows in the actual grid view, there is no way to make them display.
Is there a way to bypass this issue? Am I doing something wrong?
4 Answers, 1 is accepted
Thank you for the provided StackBlitz example.
It seems that the Grid is configured to display 10 items per page while using virtual scrolling. It is recommended to set the pageSize at least three(3) times the number of the visible Grid elements. This will avoid any unexpected behavior during scrolling, as demonstrated in the following article of our documentation:
Setting a proper pageSize will fix the issue with filtered items not displaying when they are less than the maximum number of rows.
I also managed to update the provided demo:
Please try the suggestion and let us know in case the issue persists. Thank you. We are looking forward to your reply.
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Thank you for your response.
What you just did, is setting pageSize to a number that is greater than data table length, which seems to be in denial with virtual scrolling concept. It works, because all items will be rendered right away. But, stackblitz code is just mere example of our production code.
For instance, let's assume there is a set of data, that consists a thousand (1k) records. There are 12 visible elements in the grid and pageSize set to 100. It still doesn't work. As if the grid remembered previous scroll position (scrolled to bottom without filter), which stands for skip > number of filtered elements or something.
Is there any way to invoke grid's rendering and rest scrollbar position after applying filters?
Indeed when using virtual scrolling the Grid loads just a portion of the complete data set. The loaded items are equal to the number provided via the pageSize property. We do recommend to load a bit more items than the currently visible once in order to ensure the smooth scrolling of the Grid while fetching the new portion of data.
Please see the following example where I loaded 1k records, show 12 items at once and set the pageSize to 100:
I am unable to reproduce the undesired behavior when filtering. Please check the example and feel free to update it in order to demonstrate the issue. Thank you.
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.
In the privided example, on every grid state change, you are truncating the data table, which leads to loading "different" set of data. It slows down the performace - that's why in my code sample [kendoGridBinding] has been used instead of [data], because (correct me if I'm wrong) you cannot use [filter] with [data]. Thus, when the grid receives new set of data (filtered out portion of complete set), it resets its rendering and scrolling.
I need filters to be dynamically applied externally (not from within the grid) with [kendoGridBinding] and [filter], so using [filterable] is not an option.
I'd be greatful if you would consider my code sample as a base for resolving this issue. I'm reading Kendo's documentation even in bed at this point.