New to Kendo UI for jQuery? Download free 30-day trial

ListView Load More Items Button


Product Progress® Kendo UI® ListView for jQuery


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?


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 #" />
            <p>#:kendo.toString(UnitPrice, "c")#</p>

      $("#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._skipRerenderItemsCount = listview._endlessPageSize;
          listview._endlessPageSize = listview._skipRerenderItemsCount + originalPageSize;
          listview.dataSource.options.endless = true;
          listview._endlessFetchInProgress = true;

      $(function() {
        var dataSource = new{
          transport: {
            read: {
              url: "",
              dataType: "jsonp"
          pageSize: 9

          dataSource: dataSource,
          height: 350,
          scrollable: "endless",
          template: kendo.template($("#template").html())

        // Disable the default endless scrolling.

      #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;
In this article