Endless scroll and pagesize in a datasource with grouping

3 posts, 0 answers
  1. Andreas
    Andreas avatar
    19 posts
    Member since:
    Oct 2010

    Posted 27 Mar 2013 Link to this post

    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!
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2892 posts

    Posted 29 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Adrian
    Adrian avatar
    15 posts
    Member since:
    Dec 2011

    Posted 24 Jul 2013 Link to this post

    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.
Back to Top