[Solved] Filterable ListView with serverPaging always returns the first records.

[Sally]

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

<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!

[Stefan]

Hello Sally,

I noticed that my colleague Rosen already provided an answer in the other thread.

I can suggest to continue the discussion there, as this one already have a link to the other and the answer can be connected to the DataSource and to the MobileListView.

Regards,
Stefan
Telerik by Progress