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

Filterable ListView with serverPaging always returns the first records.

1 Answer 7 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Sally asked on 28 Oct 2016, 08:45 PM

Hi everyone.

Well I first created this post under the DataSource forum but couldn't move it here ( 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">
        <div class="teaser-content">
            <div><span>Amount being raised: </span> <span>$#:data['AmountRaised'].substring(0,data['AmountRaised'].length-3)#</span></div>
            <div><span>Sector: </span> <span>#:data['Industry']#</span></div>
            <div><span>Exchange: </span> <span>#:data['Exchange']#</span></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>


And this is the JS code.

var dataProvider =;
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;
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!

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 01 Nov 2016, 11:13 AM
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.

Telerik by Progress
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
ListView (Mobile)
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question