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.

Hi,

tabulator appends whitespace to listview when target element is partial or completely outside clientview and you cannot scroll back to the top.

Is there a fix?

Kind regards

Axel

Hello, i would like to make list to fill its data from an URL, but I am not able to do that, i tried to follow documentation but I have only found example of loading local data.

That is working, but i would like to use ajax datasource, http://dojo.telerik.com/@andrea/uvanE

That is the json data that correspond to the execution of the MVC controller I have server side: http://dojo.telerik.com/@andrea/uvanE/2

that is my try to use the remote data http://dojo.telerik.com/@andrea/uvanE/3

the json data have been generated by the following server code, and i do not know if it is in the correct format that the list expect

I am trying the following code to change the border bottom color of an 'li' element in a list-view

http://dojo.telerik.com/ApIp/27

It does not work

Could you please let me know what's the issue ?

Hi everyone.

Well I first created this post under the DataSource forum but couldn't move it here (http://www.telerik.com/forums/filterable-listview-with-serverpaging-always-returns-the-first-records). Please erase the previous one if you guys think it's worth it to be there.

So, I've been experiencing some issues with the following listView

And this is the JS code.

The problem is with the filter input for the ListView component which always return the first records, btw the filter is applied on the 'CompanyName' property

For example if my elements are: ["AA" , "BB",  "CC", "ZA", "YA" ]

If I filter using the string 'A' the resulting elements will be "AA", "BB" and "CC", instead of "AA", "ZA" and "YA" which is the correct result.

I realized that If I remove the property serverPaging the filter works as expected with no issues, but as soon as the serverPaging property is placed this weird behavior appears. I do need the serverPaging property though :( 

Does anyone know what could be the root of this problem? It's been driving me crazy.

Thank you very much!

Two general questions from a relative beginner at this client side SPA stuff. I've had to bridge from a variety of "demos" (for which I'm thankful) and I thank you for any assistance you can provide.

I'm attempting to generate a datasource using sql to a local database which will then be bound to a mvvm listview and rendered via user interaction

Here's the Listview segment I'm using. Note that I've created my own 'accordion like' display mechanism which toggles the "display" which is why it's set to "none" initially in the div.

<div class = "no-arrow-listview" id = "hoursCategoryAttractionsListview" style = "display:none;">
             <ul data-role="listview" data-source=" app.GeneralEstateHours_Attractions_DataFile.data" data-template="hours-template" data-style = "inset"> </ul>
 </div>

Here's the code I'm working on to generate the datasource for the listview

app.GeneralEstateHours_Attractions_DataFile = {
            data: new kendo.data.DataSource({
               transport: {
                       read:  function(options) {
                       app.db.transaction(function(tx) {
                                    tx.executeSql('SELECT * from masterDataTable where appMapCategoryID = ? ', [ 'Attraction'],
                                                function(tx, result){
                                                            var data = [];
                                                            for (var i = 0; i < result.rows.length; i++){
                                                                        data[i] = result.rows.item(i);
                                                 }
                                                options.success(data);
                                    });
                        });
                  }
            },
            group: {
                        field: "appMapCategoryID"

            },
            sort:  {
                        field: "appListOrder", dir: "asc"
            }
            })
    };  

The issue is that if I omit the "group" filter from the datasource (though I can verify that there is a valid result set returned via the fetch function and some console output listed below) the listview does not display anything. Whereas, if I include the group filter (as I did in the code above) it does indeed render the listview but adds a header to the listview and I don't want to include the "header" that is generated by using the 'group' filter.

If I can't work with the raw return is there away to remove the "listview header" from the generated listview .

     app.GeneralEstateHours_Attractions_DataFile.data.fetch(function(){
            var test = app.GeneralEstateHours_Attractions_DataFile.data.view();
            //alert ("The length of attractions is " + test.length);
            for (var i = 0; i<test.length; i++){

          console.log("From the Fetch of the new GeneralEstateHours_Attractions_DataFile Data source we have " + test[i].title + "image" + test[i].image + " id = " + test[i].id + "");
        }
       });

endlessScroll

1. Play the dojo at http://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/listview#configuration-endlessScroll
2. With the default pageSize of 100, it works as expected
3. Use a pageSize of 10, it does not work
4. Use a pageSize of 60, pull the list and it adds records randomly

loadMore

1. Play the dojo at http://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/listview#configuration-loadMore 
2. With the default pageSize of 100, it works as expected
3. Use a pageSize of 10, it does not work
4. Use a pageSize of 60, the load more button does not work but pull the list and it adds records randomly

This is Kendo UI v2016.3.914 in any browser 

Is there a way to enable filtering in the list if it does not use a dataSource and just binds directly to the HTML ?

<ul id="listView">
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
</ul>

<script>

$("#listView").kendoMobileListView({

filterable: true

});

</script>

I do get a textbox to filter, but no matter what I type, nothing comes up!

Hi, I am binding a json nested object to a kendo-mobile-list-view and it displays the items as [object Object]. How can I avoid this issue?

Im attaching a dojo link: http://dojo.telerik.com/ExakU/2

Thanks.