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>
<kendo-scrollview name="scrollView" content-height="100%"
on-change="onChange"
on-refresh="onRefresh"
style="height:420px; width:660px; max-width:100%; margin: auto;">
<items>
<scrollview-item>
<content>
<div class='photo photo1'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo2'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo3'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo4'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo5'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo6'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo7'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo8'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo9'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo10'></div>
</content>
</scrollview-item>
</items>
</kendo-scrollview>
<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>)
)
)
<kendo-scrollview name="scrollView" content-height="100%"
on-change="
function(){
// Handle the change event inline.
}"
on-refresh="
function(){
// Handle the refresh event inline.
}"
style="height:420px; width:660px; max-width:100%; margin: auto;">
<items>
<scrollview-item>
<content>
<div class='photo photo1'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo2'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo3'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo4'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo5'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo6'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo7'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo8'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo9'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo10'></div>
</content>
</scrollview-item>
</items>
</kendo-scrollview>