Kendo Mobile - combining group and server side paging functionality to listview

Question

I have a datasource that contains specific records for certain months. It's connected to a listview. Is it possible to combine endless scrolling, server paging, and grouping to display records by month.. with only a single group header for each month?

Currently, when the datasource retrieves the next page it will add a group header, regardless of that group header having already been displayed on a previous page.

The only solution I can think of is to change the pagesize to be dynamic where each page represents a month of records... though this doesn't feel like a clean solution.

I am currently using JQuery 1.9.1 and Kendo Q1 2013 release.

Answer 1

For anyone looking to do this, it is currently not possible out of the box. I figured out a way to get things working by removing any duplicate grouping headers and then merging the duplicate containers. Bind to the change event of the datasource with this code:

                setTimeout(function () {
                    var headerMap = {};

                    $($("#listview .km-group-title .km-text").get().reverse()).each(function () {
                        var targetText = $(this).text();

                        if (headerMap[targetText] == null) {
                            headerMap[targetText] = true;
                        } else {
                            // merge any list items from the duplicate container into the next proceeding group container
                            $(this).parent().next("ul").children().prependTo($(this).closest("li").next("li").find("ul"));
                            // remove the (now empty) duplicate container
                            $(this).closest("li").remove();
                        }
                    });
                }, 0);

Should get the job done! Hope this helps anybody trying to perform grouping, server paging, and endless scrolling all together.