ASP.NET Core ScrollView Overview

Telerik UI for ASP.NET Core Ninja image

The ScrollView is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The Telerik UI ScrollView TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI ScrollView widget.

The ScrollView displays a horizontal collection of content or image views with built-in navigation between them. It can be scrolled through dragging, gestures, arrow click or page click or tap. Among the key features of the ScrollView are data-source binding, customizable template, built-in pager, adjustable bounce effects and scroll velocity.

Initializing the ScrollView

You can initialize the ScrollView either from HTML or from a data source with a template.

From HTML

  1. Use its Items() method.
  2. Add HTML elements for each page as part of the content of the ScrollView items.
    <style>
        h1 {
            margin-top: 30%;
            text-align:center;
        }
    </style>
    @(Html.Kendo().ScrollView()
            .Name("scrollView")
            .ContentHeight("100%")
            .Items(x =>
            {
                x.Add().Content("<h1>One</h1>");
                x.Add().Content("<h1>Two</h1>");
                x.Add().Content("<h1>Three</h1>");
            })
            .HtmlAttributes(new { style = "height:748px; width:1022px; max-width: 100%;" })
    )
   <kendo-scrollview name="scrollView" content-height="100%" 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>

From the Data Source

  1. Create a Kendo UI for jQuery template.
  2. Use the TemplateId() method to pass it and provide a DataSource.

Make sure that the template provides the pageSize of the data source. If serverPaging is enabled, the ScrollView will request the data in advance so it becomes available before it is required, thus improving user experience. The 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.

    @(Html.Kendo().ScrollView()
         .Name("scrollView")
         .ContentHeight("100%")
         .TemplateId("employee-template")
         .DataSource(d =>
                d.Custom()
                  .Type("odata")
                  .Transport(t => t.Read(r => r.Url("https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees")))
                  .ServerPaging(true)
                  .PageSize(1))
         .HtmlAttributes(new { style = "height:600px; width:890px; max-width: 100%;" })
    )
    <script id="employee-template" type="text/x-kendo-template">
        <div class="template">
            <h1>
                <span>#:TitleOfCourtesy# #: FirstName# #: LastName# </span>
            </h1>
            <h3>Title: #: Title #</h3>
            <div class="notes"><em>#:Notes#</em></div>
            <div class="country">
                #: Country #
            </div>
        </div>
    </script>
    <kendo-scrollview name="scrollView" content-height="100%" 
                                        template-id="employee-template" 
                                        style="height:600px; width:890px; max-width: 100%;">
        <datasource custom-type="odata" page-size="1" server-paging="true">
            <transport>
                <read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees" />
            </transport>
        </datasource>
    </kendo-scrollview>
    <script id="employee-template" type="text/x-kendo-template">
        <div class="template">
            <h1>
                <span>#:TitleOfCourtesy# #: FirstName# #: LastName# </span>
            </h1>
            <h3>Title: #: Title #</h3>
            <div class="notes"><em>#:Notes#</em></div>
            <div class="country">
                #: Country #
            </div>
        </div>
    </script>

The following example demonstrates how to fetch data from a Controller action.

    @(Html.Kendo().ScrollView()
        .Name("scrollView")
        .EnablePager(false)
        .ContentHeight("100%")
        .TemplateId("scrollview-template")
        .DataSource(dataSource => dataSource
            .Custom()
            .Type("aspnetmvc-ajax")
            .Transport(transport => transport
            .Read(read => read.Action("GetScrollViewData", "Home"))
            )
            .Schema(s => s.Data("Data").Total("Total"))
            .ServerPaging(true)
            .PageSize(1))
        .HtmlAttributes(new { style = "height:200px; width:300px" })
    )

    <script id="scrollview-template" type="text/x-kendo-template">
        <p style="border: 2px solid blue; color: red;">#= data.SomeField #</p>
    </script>
    <kendo-scrollview name="scrollView"
                      enable-pager="false"
                      content-height="100%"
                      template-id="scrollview-template">
        <datasource custom-type="aspnetmvc-ajax" server-paging="true" page-size="1">
            <transport>
                <read url="@Url.Action("GetScrollViewData","Home")"/>
            </transport>
            <schema data="Data" total="Total"></schema>
        </datasource>
    </kendo-scrollview>

    <script id="scrollview-template" type="text/x-kendo-template">
        <p style="border: 2px solid blue; color: red;">#= data.SomeField #</p>
    </script>
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult GetScrollViewData([DataSourceRequest]DataSourceRequest request)
        {
            IEnumerable<MyModel> data = Enumerable.Range(1, 5).Select(x => new MyModel { SomeField = "item " + x + " from page " + request.Page });

            return Json(data.ToDataSourceResult(request));
        }
    }
    public class MyModel
    {
        public string SomeField { get; set; }
    }

If you set the PageSize option to a larger value, you will need to use a loop in the template.

    <script id="scrollview-template" type="text/x-kendo-template">
        # for (var i = 0; i < data.length; i++) { #
            <p style="border: 2px solid blue; color: red;">#= data[i].SomeField #</p>
        # } #
    </script>

Functionality and Features

Events

For a complete example on basic ScrollView events, refer to the demo on using the events of the ScrollView.

Referencing Existing Instances

To reference an existing Telerik UI ScrollView instance, use the jQuery.data() configuration option. Once you have a reference to the widget, use the ScrollView client-side API to control its behavior.

    // Place the following after your Telerik UI ScrollView for ASP.NET Core declaration.
    <script>
    $(function() {
        // The For() of the ScrollView is used to get its client-side instance.
        var scrollview = $("#scrollview").data("kendoScrollView");
    });
    </script>

Next Steps

In this article