Endless scroll and pagesize in a datasource with grouping

[Andreas]

Hi!

We have a listView widget with endless scroll, bound to a datasource with a pagesize set to 10. We also use grouping on that datasource (one field, ascending).

The problem is that when new items are loaded in they form their own group, so we get many small groups of 10 items. We would like to ONLY group by the value in the group{field} and NOT group by pagesize. Any ideas?


- Example of how it is now and what we want to avoid -
Category (header)
Place (header)
Place (header)
Place (header)

- Example of what we want to achive -
Category (header)
Place (header)


Thanks!

[Alexander Valchev]

Hi Andreas,

Thank you for getting in touch with us.

I am afraid that it is not possible to use those features together. At present the ListView widget does not support grouping with endless scrolling.

Please accept my apology for the inconvenience caused.

Kind regards,
Alexander Valchev
the Telerik team

[Adrian]

Working with KendoUI Q1.2013 this is the work-around that we came up with to remove duplicate headings. This was particularly a problem when using smaller pagesizes.

Simply pass the css selector into the function such as '#my-listview'

/**
 * Fix KendoUI Q1.2013 bug where group headings are repeated in a listview
 * when the listview has endlessScroll enabled.
 *
 * This fix checks for duplicate headings and removes them.
 **/
function kendoListViewGroupingFix(targetListviewSelector) {

    // Get Listview
    var listview = $(targetListviewSelector).data("kendoMobileListView");
    if (listview.options.endlessScroll && listview.dataSource.group()) {

        // bind to the dataBound event
        listview.bind("dataBound", function (e) {

            var groupTitles = {};

            // Foreach group-title check it's heading count
            $.each($(targetListviewSelector).find('.km-group-title'), function (k, v) {
                var headingTitle = $(v).text();
                if (!groupTitles[headingTitle]) {
                    groupTitles[headingTitle] = 1;
                } else {
                    // Duplicate title found
                    // console.log(headingTitle);
                    $(v).hide();
                }
            });

        });
    }

}

Cheers.