Events
The Telerik UI Sortable for ASP.NET MVC exposes multiple events that allow you to control the behavior of the UI component.
For a complete example, refer to the demo on using the Sortable events.
Handling by Handler Name
The following example demonstrates how to subscribe to events by a handler name.
<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
@(Html.Kendo().Sortable()
.For("#sortable")
.Events(events => events
.Start("onStart")
.Change("onChange")
)
)
<script>
function onStart(e) {
var id = e.sender.element.attr("id");
console.log(id + " start: " + e.item.text());
}
function onChange(e) {
var id = e.sender.element.attr("id"),
text = e.item.text(),
newIndex = e.newIndex,
oldIndex = e.oldIndex;
console.log(id + " change: " + text + " newIndex: " + newIndex + " oldIndex: " + oldIndex + " action: " + e.action);
}
</script>
Handling by Template Delegate
The following example demonstrates how to subscribe to events by a template delegate.
<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
@(Html.Kendo().Sortable()
.For("#sortable")
.Events(events => events
.Start(@<text>
function() {
// Handle the Start event inline.
}
</text>)
.Change(@<text>
function() {
// Handle the Change event inline.
}
</text>)
)
)