Grouped Data Endless Scroll ListView Kendo Not working

2 posts, 0 answers
  1. Patrick
    Patrick avatar
    29 posts
    Member since:
    Apr 2014

    Posted 03 Apr Link to this post

    I can't get kendo listview to properly auto scroll when I have grouping. Change autoscroll to true to see issue below.
    I am also having a similar problem with angular.
    JSFiddle below
    https://jsfiddle.net/jcbowyer/ao0xzoaz/1/

     

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8"/>
            <title>Kendo UI Snippet</title>
            <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css"/>
            <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css"/>
            <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.silver.min.css"/>
            <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css"/>
            <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
            <script src="http://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
        </head>
        <body>
            <div data-role="view">
                <ul data-role="listview" data-source="groupedData" data-template="my-template" data-header-template="header-template" data-endless-scroll="false"></ul>
            </div>
            <script type="text/x-kendo-template" id="my-template">
                <h3 class="item-title">#: name #</h3>
                 <p class="item-info">#: description #</p>
     
            </script>
            <script type="text/x-kendo-template" id="header-template">
                my group - #: value #
     
            </script>
            <script>
                var groupedData = new kendo.data.DataSource({
                   schema : {total: function (data) {
                     return 5}
                 },
                  data: [
                    { name: "Sashimi Salad", description: "Organic greens topped with market fresh sashimi, wasabi soy vinaigrette.",  letter: "S" },
                    { name: "Seaweed Salad", description: "A nice seaweed salad.",  letter: "S" },
                { name: "Edamame", description: "Boiled soy beans with salt.",  letter: "E" },
                { name: "Maguro", description: "Tuna pieces.",  letter: "M" },
                { name: "Tekka Maki", description: "Tuna roll with wasabi.",  letter: "T" },
                { name: "California Rolls", description: "Crab sticks, avocado and cucumber.",  letter: "C" }
                  ],
                  group: { field: "letter" },
                pageSize: 2
                });
     
                new kendo.mobile.Application();
     
            </script>
        </body>
    </html>

    I can't get kendo listview to properly auto scroll when I have grouping. Change autoscroll to true to see issue below.

    I am also having a similar problem with angular.

    JSFiddle below

    https://jsfiddle.net/jcbowyer/ao0xzoaz/1/

    I can't get kendo listview to properly auto scroll when I have grouping. Change autoscroll to true to see issue below.

    I am also having a similar problem with angular.

    JSFiddle below

    https://jsfiddle.net/jcbowyer/ao0xzoaz/1/

    I can't get kendo listview to properly auto scroll when I have grouping. Change autoscroll to true to see issue below.

    I am also having a similar problem with angular.

    JSFiddle below

    https://jsfiddle.net/jcbowyer/ao0xzoaz/1/

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    356 posts

    Posted 05 Apr Link to this post

    Hello Patrick,

    You are experiencing the described behavior, as there are certain limitations, imposed by virtual mode. Grouped mode is one of them, as stated in the third "Important" area in the following section of our documentation:

    http://docs.telerik.com/kendo-ui/controls/hybrid/listview/endless-scrolling#virtual-mode

    Let us know, if you have further questions about Kendo UI.

    Regards,
    Dimiter Topalov
    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
Back to Top