New to Telerik UI for ASP.NET Core? Download free 30-day trial

Paging

By default, the pager of the Telerik UI ScrollView for ASP.NET Core is enabled.

If the pager is set to false, the ScrollView will not display a pager.

    @(Html.Kendo().ScrollView()
                .Name("scrollView")
                .EnablePager(false) // The ScrollView will not display a pager.
                .ContentHeight("100%")
                .TemplateId("scrollview-template")
                .DataSource(d =>
                        d.Custom()
                          .Type("odata")
                          .Transport(t => t.Read(r => r.Url("https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products")))
                          .ServerPaging(true)
                          .PageSize(3))
                .HtmlAttributes(new { style = "height:600px; width:890px; max-width: 100%;" })
    )

    <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>
        function setBackground(id) {
            return "url(https://demos.telerik.com/kendo-ui/content/web/foods/" + id + ".jpg)";
        }
    </script>
    <kendo-scrollview name="scrollView" content-height="100%" 
                                        enable-pager="false"
                                        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>
    <script>
        function setBackground(id) {
            return "url(https://demos.telerik.com/kendo-ui/content/web/foods/" + id + ".jpg)";
        }
    </script>

Using Overlay

The ScrollView component provides the PagerOverlay property which sets an overlay background color for the pager. It can be configured to one of the three possible values:

  • none - no background overlay is set
  • dark - sets a dark-colored background overlay
  • light - sets a light-colored background overlay
    <style>
        h1 {
            margin-top: 30%;
            text-align:center;
        }
    </style>
    @(Html.Kendo().ScrollView()
            .Name("scrollView")
            .PagerOverlay("dark")
            .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%" pager-overlay="dark" 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>

See Also

In this article