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

Events

The Telerik UI Sortable for ASP.NET Core 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>
     <ul id="sortable">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <kendo-sortable name="sortable" on-start="onStart" on-change="onChange">
    </kendo-sortable>

    <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>)
        )
    )
    <ul id="sortable">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <kendo-sortable name="sortable" 
        on-start="function() {
                 // Handle the Strat event inline.
              }"
        on-change="function() {
                 // Handle the Change event inline.
              }">
    </kendo-sortable>

See Also

In this article