Problems with server grouped datasource when endless scroll is enabled

4 posts, 0 answers
  1. Jason
    Jason avatar
    4 posts
    Member since:
    Dec 2013

    Posted 31 Jul 2014 Link to this post

    Hi,

    I have a listview bound to a datasource which is returning grouped data.  Everything works until I enable endless scrolling.  When I do that, it appears it breaks the list view item bindings.  With some debugging, I found the the list view item template is using the group as data, rather than the items within the group.  

    HTML:
    <!-- Receivables Listing view -->
    <div id="receivables" data-role="view" data-title="Receivables" data-model="receivablesListViewModel" >
     
        <ul id="receivablesListView"
            data-role="listview"
            data-bind="source: receivablesDataSource"
            data-endless-scroll="true"
            data-pull-to-refresh="true"
            data-template="receivables-template"
            data-fixed-headers="true"></ul>
    </div>
     
    <!-- Receivables list view item template -->
    <script id="receivables-template" type="text/x-kendo-template">
        <a class="flex" href="\\#receivables/details?id=#:id#" data-transition="slide">
            <div>
                <div>#: companyName #</div>
                <div>#: invoiceNumber #</div>
            </div>
        </a>
    </script>


    JS:
    var receivablesListViewModel = new kendo.data.ObservableObject({
        receivablesDataSource: new kendo.data.DataSource({
            transport: {
                read: function (options) {
                    $.getJSON("/receivables?$top=" + options.data.take + "&$skip=" + options.data.skip)
                        .done(function(data) {
                            options.success(data);
                        });
                },
            },
            schema: {
                groups: 'response.groups',
                model: {
                    id: "id"
                },
                total: function(d) {
                    return d.response.count;
                }
            },
            group: {
                field: "name",
            },
            serverPaging: true,
            serverSorting: true,
            serverGrouping: true,
            pageSize: 50
        }),
    });


    Payload returned by the server:
    {
        "success": true,
        "response": {
            "count": 9,
            "groups": [
                {
                    "field": "Name",
                    "items": [
                        { "companyName": "Photobombs", "id": "398ea14d-70b7-45c6-a66d-a1240109be92", "invoiceNumber": "10a", },
                        { "companyName": "Code Monkeys Inc.", "id": "9d63d825-5ec7-4bf9-9c33-a10d00d4833c", "invoiceNumber": "874511487412" },
                        { "companyName": "Photobombs", "id": "00dc1e93-f3c9-4b69-94e8-a10c001bc6da", "invoiceNumber": "Inv 85799" },
                        { "companyName": "Photobombs", "id": "1d008815-b2b2-4e37-8399-a10c001967c9", "invoiceNumber": "Inv+tax 5847" },
                        { "companyName": "Photobombs", "id": "0499f294-573a-4349-bdc5-a10c0014416a", "invoiceNumber": "Inv 83282" },
                        { "companyName": "Photobombs", "id": "d9813a8b-e0e1-4a98-a151-a10c0012f89d", "invoiceNumber": "Inv 83294" }
                    ],
                    "name": "Open",
                    "value": "Open"
                },
                {
                    "field": "Name",
                    "items": [
                        { "companyName": "Photobombs", "id": "592f81ce-e367-44ec-8765-a10c001adc51", "invoiceNumber": "Inv+tax 52478"},
                        { "companyName": "Photobombs", "id": "5b5012a6-3c06-45f9-9b59-a10d00d92d29", "invoiceNumber": "Paid892333A" },
                        { "companyName": "Photobombs", "id": "69245e54-5cb9-45bb-a26b-a10d00d9a73f", "invoiceNumber": "Paid#2" }
                    ],
                    "name": "Closed",
                    "value": "Closed"
                }
            ],
            "inboxCount": 0
        },
        "messages": [],
        "info": []
    };

    When endless scrolling is disabled, this displays as I would expect, with the items grouped correctly.  When I enable endless scrolling, I get an error saying that companyName is not defined.

    Any ideas? 

    Thanks,
    Jason
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 01 Aug 2014 Link to this post

    Hello Jason,

    Grouped mode is not supported along with endless scrolling enabled, so the behavior that you observe is expected. Please check the following documentation article where the same is explained:

    http://docs.telerik.com/kendo-ui/getting-started/mobile/listview#press-to-load-more--endless-scrolling

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Jason
    Jason avatar
    4 posts
    Member since:
    Dec 2013

    Posted 13 Aug 2014 in reply to Kiril Nikolov Link to this post

    Hi Kiril,

    I voted on the feature request for supporting groups with endless scrolling.  I noticed it has the third highest vote count for mobile feature requests.  Are there any plans to add this support for this in the future?

    Thanks,
    Jason
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 14 Aug 2014 Link to this post

    Hi Jason,

    We are currently in process of reviewing the functionalities that will be added for the Q3 release. I am not really sure if this will be part of that release, but please check the Roadmap regularly, where all updates are posted:

    http://www.telerik.com/support/whats-new/kendo-ui/roadmap

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready