Filterable ListView with serverPaging always returns the first records.

[Sally]

Hi everyone.

I've been experiencing some issues with the following listView.

<ul data-role="listview" id="allFinancingsScroller" data-filterable='{field: "CompanyName", ignoreCase: true, operator: "contains"}' data-template="allFinancingsViewModelTemplate" data-bind="{ source: allFinancingsViewModel.dataSource }" data-pull-to-refresh="true" data-endless-scroll="true" data-messages='{ "releaseTemplate": "Release to refresh! / Afficher plus de données", "pullTemplate": "Pull to refresh! / Tirez pour actualiser!", "refreshTemplate": "Refreshing! / Actualisation en cours!" }'></ul>

<script type="text/x-kendo-template" id="allFinancingsViewModelTemplate">
    <a href="components/financingsDetails/view.html?id= #: data['Id'] #">
    <div class="teaser">
        <figure>
            <span>#:data['Symbol']#</span>
        </figure>
        <div class="teaser-content">
            <h2>#:data['CompanyName']#</h2>
            <div><span>Amount being raised: </span> <span>$#:data['AmountRaised'].substring(0,data['AmountRaised'].length-3)#</span></div>
            #if(data['Industry']){#
            <div><span>Sector: </span> <span>#:data['Industry']#</span></div>
            #}#
            #if(data['Exchange']){#
            <div><span>Exchange: </span> <span>#:data['Exchange']#</span></div>
            #}#
            <div>
            #if(data['Status'].length > 0){#
            <span class="status">#:data['Status']#: </span>
            #} else {#
            <span>Date: </span>
            #}#
            <span>#:data['TimeStamp'].substr(8, 2) + "/" + data['TimeStamp'].substr(5, 2) + "/" + data['TimeStamp'].substr(0, 4)#</span>
            </div>
        </div>
    </div>
    </a>
</script>

 

And this is the JS code.

var dataProvider = app.data.allFinancingsDataProvider;
var dataSourceOptions = {
        transport: {
            read: {
                url: function() {
                        return dataProvider.url + "?ismobile=true&Lang=" + locale;
                },
                dataType: 'json'
            }
        },
        schema: {
            data: 'ApiDataModel',
            total: 'TotalFilteredRecords'
        },
        serverPaging: true,
        pageSize: 40
    };

var dataSource = new kendo.data.DataSource(dataSourceOptions);
var allFinancingsViewModel = kendo.observable({
        dataSource: dataSource
});

 

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!

 

 

 

 

 

[Rosen]

Hello Sally,

If I understood correctly your scenario you mean that if the data looks like the following ["AA" , "BB",  "CC", "ZA", "YA" ] and you filter on "A", the result show is just the first "AA" record. If this is the case most probably it is due to the fact that as the paging is applied on the server only portion of the data is available on the client, thus the filtering is applied only over this partial data and the result are the records matching the condition from the first page.

As the filtering is operation which should be applied prior the paging in order to yield correct results you should consider enabling serverFiltering option too and to handle the filtering on the server. 

Regards,
Rosen
Telerik by Progress

 

 

[Sally]

Hi Rosen, thanks for your reply.

Think I don't explained myself well, if I have the following set of records  ["AA" , "BB",  "CC", "ZA", "YA" ] and I filter using "A", what I get as the result is ["AA" , "BB",  "CC"] instead of  ["AA" , "ZA", "YA"]. 

Other case would be is if I have the same set ["AA" , "BB",  "CC", "ZA", "YA" ] and filter using "Z", the result is ["AA"] instead of ["ZA"].

The filter returns the correct amount of items but not the correct values, it's like it's taking always the first values no matter what.

Thank you.

[Rosen]

Hello Sally,

Thanks for the clarification. Unfortunately, it seems that the described behavior is limitation of the MobileListView virtualization. Therefore, you should consider enabling the serverFiltering and handling the filtering on the server.

Regards,
Rosen
Telerik by Progress