ListView Load More Items Button

Environment

Product

Progress® Kendo UI® ListView for jQuery

Description

I want to create a behavior similar to the Endless Scrolling functionality, however the items must be loaded when the user clicks on a button.

How can I achieve this functionality?

Solution

You can use the internal logic of the Endless Scrolling feature to load more items when the user clicks on a button instead of scrolling the component.

    <div id="listView"></div>
    <button id="load" class="k-button k-button-md k-button-solid-primary">Load More</button>


    <script type="text/x-kendo-template" id="template">
        <div class="product">
            <img src="../content/web/foods/#= ProductID #.jpg" alt="Kendo UI for jQuery ListView #: ProductName #" />
            <h3>#:ProductName#</h3>
            <p>#:kendo.toString(UnitPrice, "c")#</p>
      </div>
    </script>

    <script>
      $("#load").on("click", function() {
        let listview = $("#listView").data("kendoListView");
        var originalPageSize = listview.dataSource.options.pageSize;

        // Implement a custom variation of the Endless scrolling behavior.
        if(!listview._endlessFetchInProgress && listview._endlessPageSize < listview.dataSource.total()) {
          listview._skipRerenderItemsCount = listview._endlessPageSize;
          listview._endlessPageSize = listview._skipRerenderItemsCount + originalPageSize;
          listview.dataSource.options.endless = true;
          listview._endlessFetchInProgress = true;
          listview.dataSource.pageSize(listview._endlessPageSize);
        }
      });

      $(function() {
        var dataSource = new kendo.data.DataSource({
          transport: {
            read: {
              url: "https://demos.telerik.com/kendo-ui/service/Products",
              dataType: "jsonp"
            }
          },
          pageSize: 9
        });

        $("#listView").kendoListView({
          dataSource: dataSource,
          height: 350,
          scrollable: "endless",
          template: kendo.template($("#template").html())
        });

        // Disable the default endless scrolling.
        $("#listView").data("kendoListView").content.off("scroll.kendoListView");
      });
    </script>

    <style>
      #listView {
        padding: 10px 5px;
        margin-bottom: -1px;
        display: flex;
      }
      .product {
        float: left;
        position: relative;
        width: 111px;
        height: 170px;
        margin: 0 5px;
        padding: 0;
      }
      .product img {
        width: 110px;
        height: 110px;
      }
      .product h3 {
        margin: 0;
        padding: 3px 5px 0 0;
        max-width: 96px;
        overflow: hidden;
        line-height: 1.1em;
        font-size: .9em;
        font-weight: normal;
        text-transform: uppercase;
        color: #999;
      }
      .product p {
        visibility: hidden;
      }
      .product:hover p {
        visibility: visible;
        position: absolute;
        width: 110px;
        height: 110px;
        top: 0;
        margin: 0;
        padding: 0;
        line-height: 110px;
        vertical-align: middle;
        text-align: center;
        color: #fff;
        background-color: rgba(0,0,0,0.75);
        transition: background .2s linear, color .2s linear;
        -moz-transition: background .2s linear, color .2s linear;
        -webkit-transition: background .2s linear, color .2s linear;
        -o-transition: background .2s linear, color .2s linear;
      }
      .k-listview:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
    </style>