New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
Templates
You can configure the items of the ScrollView by using plain HTML and CSS, by setting a dynamic template, or by using a no-item template.
HTML Template
The following example demonstrates how to use HTML templates to set the ScrollView items.
Razor
@(Html.Kendo().ScrollView()
.Name("scrollView")
.ContentHeight("100%")
.Items(x =>
{
x.Add().Content("<div class='photo photo1'></div>");
x.Add().Content("<div class='photo photo2'></div>");
x.Add().Content("<div class='photo photo3'></div>");
x.Add().Content("<div class='photo photo4'></div>");
x.Add().Content("<div class='photo photo5'></div>");
x.Add().Content("<div class='photo photo6'></div>");
x.Add().Content("<div class='photo photo7'></div>");
x.Add().Content("<div class='photo photo8'></div>");
x.Add().Content("<div class='photo photo9'></div>");
x.Add().Content("<div class='photo photo10'></div>");
})
.HtmlAttributes(new { style = "height:748px; width:1022px; max-width: 100%;" })
)
Dynamic Template
The ScrollView allows for configuring a dynamic template which loops through all of its data items.
Razor
@(Html.Kendo().ScrollView()
.Name("scrollView")
.EnablePager(false)
.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%;" })
)
No-Item Template
The following example demonstrates how to set a template when no ScrollView items will be displayed.
Razor
@(Html.Kendo().ScrollView()
.Name("scrollview")
.EmptyTemplateId("scrollview-empty")
)