autoBind Boolean(default: true)

If set to false the widget will not bind to the DataSource during initialization.

Applicable only in the data-bound mode.

Example

<div id="example" style="margin:auto; width:60%">
  <button id="btn">ScrollView Load</button>
  <div id="scrollView" style="height: 500px; width:100%;"></div>

  <script id="scrollview-template" type="text/x-kendo-template">
    <div class="img-wrapper">
        # for (var i = 0; i < data.length; i++) { #
        <div>
            <div style="width: 140px; height: 140px; background-image: #=setBackground(data[i].ProductID)#; background-repeat:no-repeat; background-size: cover;"></div>
            <p>#= data[i].ProductName #</p>
    </div>
     # } #
    </div>
  </script>

  <script>
    $('#btn').on('click', function(){
      let scrollview = $("#scrollView").data('kendoScrollView');
      scrollview.dataSource.fetch(function() {
        scrollview.scrollTo(0, true);
      });
    })


    var dataSource = new kendo.data.DataSource({
      type: "odata",
      transport: {
        read: {
          url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
        }
      },
      serverPaging: true,
      pageSize: 3
    });

    $("#scrollView").kendoScrollView({
      dataSource: dataSource,
      autoBind: false,
      template: $("#scrollview-template").html(),
      contentHeight: "100%",
      enablePager: false
    });

    function setBackground(id) {
      return "url(https://demos.telerik.com/kendo-ui/content/web/foods/" + id + ".jpg)";
    }
  </script>

  <style>

    div.k-scrollview ul.k-scrollview-wrap > li {
      text-align: center;
      display: table;
      box-sizing: border-box;
    }

    ul.k-scrollview-wrap > li > .img-wrapper {
      padding: 2em;
      display: table-cell;
      vertical-align: middle;
      white-space: initial;
    }

    ul.k-scrollview-wrap > li > .img-wrapper > div {
      width: 30%;
      min-width: 150px;
      box-sizing: border-box;
      display: inline-block;
      vertical-align: top;
      margin-bottom: 1em;
    }

    ul.k-scrollview-wrap > li > .img-wrapper > div > div {
      margin: auto;
      margin-bottom: 0.5em;
    }

  </style>
</div>