emptyTemplate String(default: "")

The template which is used to render the pages without content. By default the ScrollView renders a blank page.

Applicable only in data bound mode.

    <div data-role="view" data-stretch="true">
      <div data-role="scrollview"
        data-source="dataSource"
        data-template="scrollview-template"
        data-empty-template="scrollview-empty"
        data-content-height="120px">
      </div>
    </div>


    <script id="scrollview-template" type="text/x-kendo-template">
      <div style="width: 110px; height: 110px; background-image: #=setBackground(ProductID)#;"></div>
      <p>#= ProductName #</p>
    </script>

    <script id="scrollview-empty" type="text/x-kendo-template">
      <div style="width: 100%; height: 100%; background-color: red;">empty</div>
    </script>

    <script>
    var app = new kendo.mobile.Application();

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

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