Filterable ListView with serverPaging always returns the first records.

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

    Posted 28 Oct Link to this post

    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!

     

     

     

     

     

  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 01 Nov Link to this post

    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
     
    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.
     
  3. Kendo UI is VS 2017 Ready
  4. Sally
    Sally avatar
    3 posts
    Member since:
    Jul 2016

    Posted 01 Nov in reply to Rosen Link to this post

    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.

  5. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 02 Nov Link to this post

    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
     
    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
Kendo UI is VS 2017 Ready