I am facing two issues with virtual scrolling and server side pagig enabled on Grid.
1. As I drag the scrollbar, multiple posts are being made instead of a post happening after the scrollbar drag is completed.
For eg.,
Lets say my pagesize is 3000 and I have total 20000 rows. Onload, page 1 data is loaded. Now when I drag the scrollbar all the way to middle, there is a lag experienced in dragging and POST is happening in points of drag. There are 1 or 2 POSTS in the background and when the scrollbar eventually drops to the intended position, another POST happens and grid gets bound to the data returned from last POST.
2. Data loaded across multiple scrolls seem to get retained in the datasource. This is making the grid/page heavy and slow after using the scroll for some time. I have monitored the server POST. In the above example, once 6 POSTS have been made with returning the 20000 rows, scrolling doesnt create server posts. Data is being paged locally.
How do I reset datasource across page loads instead of appending the data recieved into the datasource ?
My grid config is as follows:
$("#grid").kendoGrid({
dataSource: {
type: "json",
serverPaging: true,
serverSorting: true,
pageSize: 3000,
allowUnsort: true,
transport: {
read: {
url: "homecontroller/action1",
type: "post",
contentType: "application/json; charset=utf-8",
dataType: "json"
},
parameterMap: function (options) {
return JSON.stringify(options); }
},
schema: { data: "Data", total: "TotalRowCount" }
},
groupable: true,
sortable: true,
pageable: true,
selectable: "multiple",
scrollable: {
virtual: true
},
columns:
[
//column definitions here
]
});
7 Answers, 1 is accepted
Straight to your questions:
1. This is intended behavior. Depending on the speed of the scroll multiple requests for different data might happen and loaded into the grid. This usually provided more fluent experience for the user.
2. Indeed, during virtual scrolling the already retrieved data will be cached locally, and used when request for same data is made. In order to free this cached data, you may use the DataSource's read method. This will issue an server request and clear the available, already fetched data.
Rosen
the Telerik team
Rank 1
Thanks for your reply Rosen.
I changed my transport.read into a function as follows:
transport: {
read: function (options) {
// make AJAX request to the remote service
$.ajax({
url: "controller/action",
data: options.data, // the "data" field contains paging, sorting, filtering and grouping data
success: function (result) {
$("#griddiv").data("kendoGrid").dataSource.data(result);
// notify the DataSource that the operation is complete
options.success(result);
}
});
},
parameterMap: function (options) { return JSON.stringify(options); }
}
Is this the right way to replace the local data in dataSource with the fetched page data ? When I use this approach, the scrollbar goes back to starting position instead of remaining at the dropped position. Could you please provide a code sample for your suggestion ?
The code you have pasted seems to use a custom transport to retrieve data. If this is the functionality you are trying to achieve, you should not manually populate the Grid's DataSource as this will be done automatically by the DataSource when the success callback is executed.
However, I'm not sure how this is related to your initial post from this thread, maybe I'm missing something obvious?
Rosen
the Telerik team
Rank 1
I was trying to add logic for replacing the data inside the datasource by defining the custom function. Could you please post a sample of how I can use dataSource.read() as suggested by you so that dataSource.data is reset with specific page data and also make it work with virtual scrolling ?
Secondly, when dataSource.data is reset with the specific page data, Would the scrollbar retain the dropped position ?
I see that there is a property for enabling or disabling caching as part of transport: {read: {cache: false, ....}}
Does this work on dataSource's local caching of data ?
Thanks
Aparna
Here you can find description of the DataSource read method.
The records retrieved and used during data virtualization are managed by the DataSource itself. The assign transport instance is responsible only for supplying the records (either from the server or from in-memory array etc.) when such are needed. During the data virtualization the fetched records are arranged in "ranges" (kept within the DataSource), which later are used for the construction of records array then shown in the widget. Those ranges are required as the items shown in the widget may not be from a single "page" of data but can be located on multiple "pages", thus additional processing should be done before this data can be visualized within the widget. Latter this already fetched data, as I have mentioned in my previous message, will be also used if the same page is accessed again, thus skipping the call to the server.
As I have mentioned in my first reply in order to clear those "ranges" of data, a request from the server should be made through the DataSource read method shown above. Here is a test page which shows simple usage.
Rosen
the Telerik team
Rank 1
Thanks for your reply. In the sample pointed by you the dataSource.read() is explicitly called on button click. But my issue is I want dataSource.read() to be called when virtual scrolling happens. I wanted a sample for this scenario. Sorry if I was not very clear in my previous post.
Thanks
Aparna
If I understood you correctly, you want to disable the ranges. I'm afraid that this is not possible as they are key part of data virtualization functionality as I have described in my previous post.
You still may consider freeing/resetting them manually at some point (as shown in the previous sample) if you find that the local data has grow considerably and will not be needed.
Regards,
Rosen
the Telerik team