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

Events

You can subscribe to the following ScrollView events and further customize the functionality of the component:

  • Change—Fires when the ScrollView page is changed.
  • Refresh—Fires when the ScrollView refreshes.

Handling Events by Handler Name

The following example demonstrates how to subscribe to events by a handler name.

    @(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:420px; width:660px; max-width: 100%; margin: auto;" })
        .Events(x=> x.Change("onChange").Refresh("onRefresh"))
    )

    <script>
        function onChange(e) {
            kendoConsole.log("page " + e.nextPage);
        }

        function onRefresh(e) {
            kendoConsole.log("Total: " + e.pageCount + " Current: " + e.page);
        }
    </script>

Handling Events by Template Delegate

The following example demonstrates how to subscribe to events by a template delegate.


        @(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:420px; width:660px; max-width: 100%; margin: auto;" })
        .Events(events => events
          .Change(@<text>
             function(){
                 // Handle the change event inline.
             }
            </text>)
          .Refresh(@<text>
             function(){
                 // Handle the refresh event inline.
             }
            </text>)
       )
    )

See Also

In this article