DxPopup.DragCompleted Event

Fires when a user drops the Popup.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public EventCallback<PopupDragCompletedEventArgs> DragCompleted { get; set; }

Event Data

The DragCompleted event's data class is PopupDragCompletedEventArgs. The following properties provide information specific to this event:

Property	Description
CancellationToken	Specifies an object that propagates a cancellation notification.
End	Returns the Popup’s position after a drag-and-drop operation.
Start	Returns the Popup’s position before a drag-and-drop operation.

Remarks

When the AllowDrag property is set to true, users can drag the Popup. Handle the DragCompleted event to react to the Popup’s position change.

The following code snippet handles DragStarted and DragCompleted events to save and load the current window position.

<div class="target-container" @onclick="@(() => PopupVisible = true)">
    <p class="target-caption">CLICK TO SHOW A POP-UP WINDOW</p>
</div>
<DxPopup AllowDrag="true"
         HeaderText="Popup"
         @bind-Visible="@PopupVisible"
         BodyText="@Constants.Text"
         PositionX="positionX"
         PositionY="positionY"
         DragCompleted="OnPopupDragCompleted">
</DxPopup>

@code {
    bool PopupVisible { get; set; } = false;
    const string LocalStorageKey = "DialogsAndWindows-Popup-Dragging";
    int? positionX, positionY;

    protected override async Task OnAfterRenderAsync(bool firstRender) {
        if (firstRender) {
            var position = await LoadPositionFromLocalStorageAsync();
            (positionX, positionY) = (position?.X ?? null, position?.Y ?? null);
            StateHasChanged();
        }
    }
    async Task OnPopupDragCompleted(PopupDragCompletedEventArgs args) {
        (positionX, positionY) = (args.End.X, args.End.Y);
        await SavePositionToLocalStorageAsync(args.End);
    }
    async Task<Point?> LoadPositionFromLocalStorageAsync() {
        var json = await JSRuntime.InvokeAsync<string>("localStorage.getItem", LocalStorageKey);
        return string.IsNullOrEmpty(json) ? null : JsonSerializer.Deserialize<Point>(json);
    }
    async Task SavePositionToLocalStorageAsync(Point position) {
        await JSRuntime.InvokeVoidAsync("localStorage.setItem", LocalStorageKey, JsonSerializer.Serialize(position));
    }
}

Note that the DragCompleted event also fires when you finish resizing the component by its edges.

Handle the DragStarted event to be notified when a user starts to drag the component.