Select dataItem (dataSource.data()) beyond pageSize with virtual scrolling

[Gary]

How do I grab items beyond the currently defined "$('#listview').data('kendoMobileListView').dataSource.data()"?

I'm writing a feature to do a batch action with selected items of a mobile listview. The kendo.data.Datasource has data loaded in remotely, and we define the following:

serverPaging: true,
pageSize: 10

The schema.total in my test case is 55. Each dataItem has a property 'Select' that has defaultValue: undefined, and is set to true/false defined by whether user selects or de-selects the item on click. I want to avoid having to create a list to hold objects and add/remove items based on whether a user selects/deselects said items, which is why i wanted to just toggle this property back and forth on click. I want the user to be able to scroll through all 55 items and select items as desired. I also want to do a 'select all' feature where the all items on the listview are selected/deselected and also allow individual toggling post 'select/de-select all' with the same 'Select' property modification in mind. Then only when the user selects to do the batch action, detect all dataItem's Select value and send those items to the function that handles the batch action.

My observations (correct me if I'm wrong):

(var dataItemList = $('#listview').data('kendoMobileListView').dataSource.data() for the purpose of brevity)

1)  dataItemList is redefined every 1/2 pageSize. So initial list is dataItemList[0] thru dataItemList[9], then next time it is defined (the return value of $('#listview').data('kendoMobileListView').dataSource.data()), it's dataItemList[5] thru dataItemList[14] (obviously where dataItemList[5] is at index 0 and dataItemList[14] is at index 9 of the new list), and so on...

2) property modifications of an item in dataItemList are retained, even after dataItemList is redefined. This leads me to believe all items in the datasource are saved somewhere and I just don't know how to access it. For example if i set dataItemList[0].Select = true, then scroll to a point on the list where dataItemList[0] isn't on dataItemList, then scroll back (so I can read it's properties), dataItemList[0].Select == true versus the default 'undefined' value.

3) I can save items to a manually generated object with key-value pair and use the key to remove or add the object to the list when a click is detected, or if the 'select all' button is clicked, load in new items to the list with itemChange event, but this will be a clumsy implementation at best for the manual select/deselect functionality post-'select all' for items outside of ones currently represented by dataItemList.

To clarify on my question:

I want to access those dataItems on the kendoMobileListView that aren't returned by dataSource.data(), but I have to keep virtual scrolling and the datasource is loaded from a remote source. Is this possible? If so, how?

Let me know if you need further clarification/example. Thanks in advance.

[Tsvetina]

Hi Gary,

Indeed, the DataSource stores data from previous pages when used for virtual scrolling. It uses a private property _ranges where data is stored in arrays of N items, where N is the DataSource pageSize (see screenshot). So, you can access:

var ranges = listViewInstance.dataSource._ranges;

However, I am not sure if this would be useful to you, because this collection stores only items that have alread been loaded by the endless/virtual scrolling. If you initially load the ListView and use this to select all items, you will select only the first page of items. 

This being said, there is no property in the ListView or DataSource that will hold all items at all times when virtual scrolling is used with server paging. That is why, I think that the approach with storing the IDs of user-selected items on the client + a flag that is true when the user has triggered a Select All action, is a good option for implementing your selection logic without moving the virtualization of data on the client.

Regards,
Tsvetina
Telerik by Progress

[Gary]

Hi Tsvetina,

Thanks for the reply. You are correct, unfortunately var ranges = listViewInstance.dataSource._ranges; isn't useful to me.

[quote]That is why, I think that the approach with storing the IDs of user-selected items on the client + a flag that is true when the user has triggered a Select All action[/quote]

A note on the quote from your reply: I was operating under the assumption that there is a way to use datasource.data() to modify the property of all items from the datasource (ala 'Select All' button). And then the user can use the 'select' action on individual items post-'select all' to de-select specific items (set that item's property 'Select = false').

Just to confirm, is there a way to "Select All" (set the 'Select' property to 'true' for all dataItems) without loading the data that hasn't been scrolled to yet?

I was originally relying on looping through all items with end condition = dataItemList.length, but your reply confirms I can't do that :(

Thanks.

[Tsvetina]

Hello Gary, 

This is the idea of server-side paging - not to keep all rows on the client (unless the user browses through the whole length of data). The DataSource can operate only on the rows available to it on the client and is aware that there are N more rows of data on the server (thanks to the total property). 

If you need to apply a modification to all actual rows of data, when server paging is enabled, you will need to do this on the server. 

As previously mentioned, you should not have such problems with client-side virtualization of data in the ListView.

Regards,
Tsvetina
Telerik by Progress

[Gary]

Thanks for the reply.

I converted my listview to use virtualviewsize and removed serverPaging and pageSize to get all the dataItems as that seemed the simpler solution. Works fine now.