How to implement a frontend pagination with Kendo UI v2020?

Question

I'm implementing a pagination on frontend side - for a Kendo List View, not for Kendo Grid. I'm getting an array with +10,000 records from the backend.

I found this examples for Kendo UI v2023 [https://kendo.cdn.telerik.com/2023.1.314/js/kendo.all.min.js] on Telerik Site.

Using Scrollable https://docs.telerik.com/kendo-ui/api/javascript/ui/listview/configuration/scrollable

<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
    <div>
        <div id="listView"></div>
    </div>
    
    <script type="text/x-kendo-tmpl" id="template">
        <div class="k-widget">
            <div>Product Name</div>
            <div>#:ProductName#</div>
            <div>Unit Price</div>
            <div>#:kendo.toString(UnitPrice, "c")#</div>
            <div>Units In Stock</div>
            <div>#:UnitsInStock#</div>
            <div>Discontinued</div>
            <div>#:Discontinued#</div>
        </div>
    </script>
    
    <script>
        $(document).ready(function () {
            var dataSource = new kendo.data.DataSource({
                data: products,
                pageSize: 6
            });
    
            $("#listView").kendoListView({
                dataSource: dataSource,
                height: 400,
                scrollable: "endless",
                template: kendo.template($("#template").html()),
            });
        });
    </script>

Using Pageable https://docs.telerik.com/kendo-ui/api/javascript/ui/listview/configuration/pageable

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $(document).ready(function () {
    var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
        dataSource = new kendo.data.DataSource({
          transport: {
            read:  {
              url: crudServiceBaseUrl + "/Products",
              dataType: "jsonp"
            }
          },
          pageSize: 10
        });

    var listView = $("#listView").kendoListView({
      dataSource: dataSource,
      template: kendo.template($("#template").html()),
      navigatable: true,
      pageable: true
    }).data("kendoListView");
  });
</script>

Problem is they not work with my current Kendo UI version - KendoUI 2020. I cannot update Kendo UI version because break other things in my web app. Any idea you could share with me? Please. Thanks in advance.

This is my current Kendo Version. [https://kendo.cdn.telerik.com/2020.3.915/js/kendo.all.min.js].

Answer 1

Add some styling to the ListView container, so a scrollbar is rendered. Endless scrolling will then work with the version you have - example