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

Events

Updated on Oct 9, 2026

The FloatingToolBar for ASP.NET MVC exposes events for changes in its visibility, for its movement, and for keyboard handling.

The FloatingToolBar supports the following events:

Show—Fires before the toolbar becomes visible. Call e.preventDefault() to keep it hidden.
Hide—Fires before the toolbar becomes hidden. Call e.preventDefault() to keep it visible.
DragStart—Fires when the user starts a pointer drag or enters the keyboard Move mode. Call e.preventDefault() to cancel the movement.
Move—Fires when the position of the toolbar changes through dragging, the keyboard Move mode, or the setPosition() method.
DragEnd—Fires when a pointer drag or the keyboard Move mode ends.
KendoKeydown—Fires when the user presses a key while the toolbar is focused.

The DragStart and DragEnd events fire only when the Draggable() option is enabled. The Move event also fires when you call the setPosition() client-side method. The data of these events contains the top and left coordinates of the toolbar.

The following example demonstrates how to subscribe to the FloatingToolBar events.

Razor

    @(Html.Kendo().FloatingToolBar()
        .Name("floatingtoolbar")
        .Visible(true)
        .Draggable(true)
        .Events(events => events
            .Show("onShow")
            .Hide("onHide")
            .DragStart("onDragStart")
            .Move("onMove")
            .DragEnd("onDragEnd"))
        .Items(items =>
        {
            items.Add().Type(CommandType.Button).Text("Save").Icon("save");
            items.Add().Type(CommandType.Button).Text("Print").Icon("print");
        })
    )

    <script>
        function onShow(e) {
            console.log("The toolbar is shown.");
        }

        function onHide(e) {
            console.log("The toolbar is hidden.");
        }

        function onDragStart(e) {
            console.log("Movement started at: " + e.top + ", " + e.left);
        }

        function onMove(e) {
            console.log("Current position: " + e.top + ", " + e.left);
        }

        function onDragEnd(e) {
            console.log("Movement ended at: " + e.top + ", " + e.left);
        }
    </script>

Events

Next Steps

See Also