ScrollView Overview

The ScrollView TagHelper helps you configure the Kendo UI ScrollView widget in ASP.NET Core applications.

It displays a horizontal collection of content or image views with built-in navigation between them. It can be scrolled via dragging, gestures, arrow click or page click or tap.

Key Features

The Kendo UI ScrollView widget:

• Can be initialized with HTML only.
• Features data source binding.
• Has a customizable template.
• Provides a built-in pager.
• Allows you to scroll to a specific page programmatically via its API methods.
• Has adjustable bounce effects and scroll velocity.
• Allows you to capture user interactions by handling the events that are triggered by the widget.

Getting Started

There are two types of initialization that the Kendo UI ScrollView features - from HTML and via data source with a template. To initialize the Kendo UI ScrollView from HTML use its items tag and define the content for each page.

Initialize the ScrollView from HTML

The following example demonstrates how to define the Kendo UI ScrollView by using a tag helper.

Example

   <kendo-scrollview name="scrollView" content-height="100%" template-id="scrollview-template" style="height:600px; width:890px; max-width: 100%;">
        <items>
            <scrollview-item>
                <content><h1>One</h1></content>
            </scrollview-item>
            <scrollview-item>
                <content><h1>Two</h1></content>
            </scrollview-item>
            <scrollview-item>
                <content><h1>Three</h1></content>
            </scrollview-item>
        </items>
    </kendo-scrollview>
    <style>
        h1 {
            margin-top: 30%;
            text-align:center;
        }
    </style>

Initialize the ScrollView with a Data Source and a Template

To initialize the Kendo UI ScrollView with a Data Source and a template, create a Kendo UI Template and use the template-id property to pass itand provide a DataSource. Ensure that the template caters for the pageSize of the data source. If serverPaging is enabled, the Kendo UI ScrollView will request the data in advance so it becomes available before it is required, thus improving user experience. The Kendo UI ScrollView uses virtualization when it is bound to a data source and it only has three pages at all times - the current, the previous and the next.

The following example demonstrates the Kendo UI ScrollView with a Data Source.

Example

    <kendo-scrollview name="scrollView" content-height="100%" template-id="scrollview-template" style="height:600px; width:890px; max-width: 100%;">
        <datasource custom-type="odata" page-size="3" server-paging="true">
            <transport>
                <read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products" />
            </transport>
        </datasource>
    </kendo-scrollview>
    <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>

See Also

• ScrollView HtmlHelper for ASP.NET Core
• ScrollView Official Demos
• ScrollView JavaScript API Reference
• Overview of the UI for ASP.NET Core TagHelpers
• Overview of Telerik UI for ASP.NET Core
• Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects
• Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects with the CLI
• Known Issues with Telerik UI for ASP.NET Core