Filterable ListView with serverPaging always returns the first records.

2 posts, 0 answers
  1. Sally
    Sally avatar
    3 posts
    Member since:
    Jul 2016

    Posted 28 Oct 2016 Link to this post

    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!

  2. Stefan
    Stefan avatar
    2578 posts

    Posted 01 Nov 2016 Link to this post

    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.
Back to Top