Problems with server grouped datasource when endless scroll is enabled

[Jason]

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

[Kiril Nikolov]

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

 

 

[Jason]

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

[Kiril Nikolov]

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