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