template String(default: "#:data#")

The template for rendering the content of the pages. By default, the ScrollView renders a div element for every page.

Applicable only in the data-bound mode.

Example - using a single-item template

<script id="scrollview-template" type="text/x-kendo-template">
  <p>#= ProductName #</p>
</script>

Example - using a multiple-item template with data being accessed through data[index].fieldName

<script id="scrollview-template" type="text/x-kendo-template">
    # for (var i = 0; i < data.length; i++) { #
    <div>
        <p>#= data[i].ProductName #</p>
    </div>
     # } #
</script>

<div id="scrollview" style="height: 120px;"></div>

<script>


$("#scrollview").kendoScrollView({
    dataSource: {
        type: "odata",
        transport: {
            read: {
                url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
            }
        },
        serverPaging: true,
        pageSize: 2
    },
    template: $("#scrollview-template").html(),
    contentHeight: 120,
    enablePager: false
});
</script>