New to Telerik UI for ASP.NET Core? Start a free 30-day trial
Paging
Updated on Oct 24, 2025
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.
Razor
@(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-v4")
.Transport(t => t.Read(r => r.Url("https://demos.telerik.com/service/v2/odata/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>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 setdark- sets a dark-colored background overlaylight- sets a light-colored background overlay
Razor
<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%;" })
)