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

Virtual Scrolling (With a varying 'total') With Filtering enabled scrolls forever

8 Answers 129 Views
Grid
This is a migrated thread and some comments may be shown as answers.
srikanth
Top achievements
Rank 1
srikanth asked on 18 Nov 2013, 12:05 PM
I have explained the details  here

My problem is that virtual scrolling works fine with varying 'total '( i.e, correctly stops  making ajax calls when the 'total' equals the number of items received)   however when  server filtering is enabled the scrolling never stops(even when the total equals the items received)

Note: This behavior is seen when you use the filter widget (but not when you merely enable 'serverFiltering' to 'true')

Any workaround for this?

8 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 20 Nov 2013, 08:42 AM
Hello srikanth,

I'm afraid that I'm unable to observe such issue locally. Here you can find a short video which captures this sample test page behavior which tries to recreate the described scenario. Please take a look maybe I'm missing something obvious.

Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
srikanth
Top achievements
Rank 1
answered on 20 Nov 2013, 11:40 AM
Hello Rosen
As i said earlier I am seeing this behavior with varying total.  My schema in the datasource  is like this (nextTotal represents the total. This value changes for every response)

schema: {
data: "items",
total:"nextTotal",
model:{
fields:{
logTime: { type: "date"  },
...........
.......... 
}
},

In my response i also have a field called 'totalRead' which i send it in the next request to tell the server that i have read these many items so far and the server should give me the next 'pageSize' items. The idea is when totalRead = nextTotal i should stop sending any requests.

Here is a glimpse of my parse (to store the totalRead) and parameterMap functions

parse: function(response){
if(response){
currTotalRead =  response.totalRead;
currSkip = response.nextSkip;

............
............
}
return response;
}

parameterMap: function(data, type) {
if (type == "read") {
            
/* Constructed the code for filters here . But not pasting here */
              
// all the variables are below have proper values. You  may ignore the values for others here
return {
 pageSize: data.pageSize,
 skip: currSkip,
 startDate:currStartDateFormatted,
 endDate:currEndDateFormatted,
 totalRead:currTotalRead,  // Note currTotalRead is assigned value for every response
 filter:data.filter 
}

}
 },


Note i am seeing this behavior in latest release (kendoui.complete.2013.2.918).  I have also tried some options like implementing read function and stop the requests if the totalRead equals nextTotal. But the problem is that the scrollbar events are still there and the loading screen is shown forever. Then i tried to unbind the scroll event but the problem is that when you scroll up you don't see the previous data that has been loaded. Note that this happens only when you click that Filter button. If i don't do any filtering then all is well.
0
Rosen
Telerik team
answered on 20 Nov 2013, 12:08 PM
Hi srikanth,

I'm not sure what requires such remapping of the values send to the server, however, the DataSource is design to work using the state it sends. Therefore, when server operations are enabled it will send a set of parameters, such as page index, page size, filter expression etc. and will expect in response the data based on this parameters. Failing to conform to this may result in unexpected results. Therefore, I suggest you to consider using the provided information about the DataSource's state to prepare the correct data and total records count.

On a side note by reading the description you have provided, I suspect that your server logic may fail to get the correct items when filter is applied as the index (currSkip) should be decreased or event reset.

Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
srikanth
Top achievements
Rank 1
answered on 20 Nov 2013, 12:40 PM
That skip is for duplicate elements and can be reset . Thats not the problem  here (what parameters i send based on the response has absolutely nothing to do with this behavior. The question is why Kendo makes ajax calls even when the  'total'  equals the elements received .(I don't know how they are doing this internally in case of varying total. i guess they have an internal check for the accumulated items count  to equal the 'total' defined in schema. But the moment you click the 'Filter' button this goes for a toss and keeps making request to server.)
0
srikanth
Top achievements
Rank 1
answered on 20 Nov 2013, 12:54 PM
That Filter button is definitely doing something.  I verified this by having  the filter value always sent as part of the URL. The scroll stops at the end  if i don't use any of the filters. But the moment i use the filter widget and clicks that Filter button it scrolls forever (worse makes ajax calls forever). 
Can you check this with developers?
Note: I have even changed the 'skip' to my custom variable 'skipRecords'(that is meant to skip duplicate records already retrieved in previous call).
The behavior is still same.
0
Rosen
Telerik team
answered on 22 Nov 2013, 07:29 AM
Hi srikanth,

Is there any chance that items are removed from the data while requests are made? For example if you have pageSize set to 100 and in the first request there are total of 150 records and on the second request for the next page there are only 50? If this is the case we will be able to address it by preventing the DataSource from trying to re-fetch the page which does not exists in this case, which is the behavior I think you are experiencing. The fix will be included in the next internal build.

Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
srikanth
Top achievements
Rank 1
answered on 22 Nov 2013, 08:06 AM
Hi Rosen
I think that's more or less the case here. We don't know the 'total' in advance and it is only mimicked until we have no more items to retrieve.

I will try to explain our requirements. This is more or less similar to twitter search results i.e., you keep scrolling down until you get all results(no more records exist). Not exactly infinite scrolling but you will stop some where down the result list. You have to tell the client to stop sending the ajax calls (unbind the scroll event) when there are no records left for this search criteria.

 In our case since we don't know the 'total' in advance  we cannot use the traditional 'jump to n page' based  pagination grids. So our best bet was to use Virtual scrolling.(as kendo supported varying 'total' from 2012 q2). And how we intend to tell the client to stop sending the requests is when the 'total' equals to the items the server has been sending . So we need the client to send some parameter 'totalRead' that indicates the items it has read so far.
So for the first request client sends totalRead as '0' and  receives the response that contains payload of 'items' of 'pageSize' size  and also other fields like
totalRead :10 (whatever pageSize)
total: 20 (Note this is not the real total but faked to include the totalRead+some constant because we dont know the num of records in advance)

 In the next request we send the totalRead as 10 (obtained from response). Lets say there are total 95 records matching the criteria.
So in the final request (10th call) when there are less than or equal to 'pageSize' records left the response will be like
totalRead:95, 
total:95

This actually works fine when i don't use filters (even when i send the filter params  as part of the url without using the filter widget) But the moment i use filters kendo widget somehow doesn't know when to stop.

Thanks
Srikanth

0
Rosen
Telerik team
answered on 25 Nov 2013, 07:18 AM
Hello srikanth,

I'm afraid that our DataSource is not designed with such as the described scenario in mind thus it is not supported. The correct execution of Grid virtual scroll feature depends on a known total number of records and is not build to support infinite scrolling type of functionality.

Also from the provided information I get the impression that your implementation assumes that once loaded the data will be kept in the DataSource, however, this is not true when filtering is executed as the ranges are cleared. This is also true for sorting and grouping operations as well as if read method is executed.

Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
srikanth
Top achievements
Rank 1
Answers by
Rosen
Telerik team
srikanth
Top achievements
Rank 1
Share this question
or