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


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

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

                .EnablePager(false) // The ScrollView will not display a pager.
                .DataSource(d =>
                          .Transport(t => t.Read(r => r.Url("")))
                .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 style="width: 140px; height: 140px;  background-image: #=setBackground(data[i].ProductID)#; background-repeat:no-repeat; background-size: cover;"></div>
                <p>#= data[i].ProductName #</p>
            # } #
        function setBackground(id) {
            return "url(" + id + ".jpg)";

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
        h1 {
            margin-top: 30%;
            .Items(x =>
            .HtmlAttributes(new { style = "height:748px; width:1022px; max-width: 100%;" })

See Also

In this article