New to Telerik UI for ASP.NET MVCStart 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-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%;" })
)

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")
)

See Also