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

See Also