Floating Toolbar Events
This article explains the events available in the Telerik Floating Toolbar for Blazor:
The ToolBar tools that you add to the Floating Toolbar expose their own events.
OnDragEnd
The OnDragEnd event fires when a pointer drag ends or keyboard Move mode commits the toolbar position. The event handler receives a FloatingToolBarDragEndEventArgs argument with the final Top and Left viewport-relative coordinates in CSS pixels.
<TelerikFloatingToolBar Draggable="@true"
OnDragEnd="@OnFloatingToolBarDragEnd" />
@code {
private void OnFloatingToolBarDragEnd(FloatingToolBarDragEndEventArgs args)
{
Console.WriteLine($"Toolbar position: {args.Left}, {args.Top}.");
}
}
OnDragStart
The OnDragStart event fires before pointer drag or keyboard Move mode starts. The event handler receives a FloatingToolBarDragStartEventArgs argument with the initial Top and Left viewport-relative coordinates in CSS pixels. Set IsCancelled to true to prevent movement.
<TelerikFloatingToolBar Draggable="@true"
OnDragStart="@OnFloatingToolBarDragStart" />
@code {
private void OnFloatingToolBarDragStart(FloatingToolBarDragStartEventArgs args)
{
Console.WriteLine($"Toolbar drag started at {args.Left}, {args.Top}.");
}
}
OnMove
The OnMove event fires when pointer drag, keyboard Move mode, or SetPositionAsync changes the Floating Toolbar position. The event handler receives a FloatingToolBarMoveEventArgs argument with the current Top and Left viewport-relative coordinates in CSS pixels. OnMove and OnDragEnd do not support cancellation. The component keeps a draggable Floating Toolbar inside the viewport.
<TelerikFloatingToolBar Draggable="@true"
OnMove="@OnFloatingToolBarMove" />
@code {
private void OnFloatingToolBarMove(FloatingToolBarMoveEventArgs args)
{
Console.WriteLine($"Toolbar moved to {args.Left}, {args.Top}.");
}
}
VisibleChanged
The VisibleChanged event fires after the effective visibility changes. It receives a bool argument with the new visibility state. Handle the event to synchronize the Visible parameter with application state.
VisibleChanged also fires after ShowAsync() or HideAsync() changes the effective visibility. Calling ShowAsync() while the component is already visible does not raise VisibleChanged.
<TelerikFloatingToolBar Visible="@IsToolbarVisible"
VisibleChanged="@OnFloatingToolBarVisibleChanged" />
@code {
private bool IsToolbarVisible;
private void OnFloatingToolBarVisibleChanged(bool newValue)
{
IsToolbarVisible = newValue;
}
}
Example
The following example demonstrates all Floating Toolbar events.