Get Dialog position

[Davron Karimov]

Hi. How to get a dialog position (x, y)? 

In order to restore his last position at the next session.

Thank you.

[Priyanka Karthikeyan]

Hi Davron Karimov,

To get the (x, y) position of a Blazor dialog and restore it in the next session, you can use a combination of JavaScript Interop to retrieve the position and local storage to persist it. Here's how you can implement this:

1. First, create a JavaScript function to get the current position of the dialog:

<!-- In your _Host.cshtml or wwwroot/index.html -->
<script>
     <script>
         function getDialogPosition(dialogId) {
                 var dialogElement = document.getElementById(dialogId);
                 if (dialogElement) {
                     var rect = dialogElement.getBoundingClientRect();
                     return {
                         x: rect.left,
                         y: rect.top
                     };
                 }
                 return null;
         }
</script>

​

2. In your Blazor component, implement the code to save and restore the dialog position:

@page "/"
@using Syncfusion.Blazor.Popups
@inject IJSRuntime JSRuntime

<SfDialog @ref="DialogObj" 
          AllowDragging="true"
          @bind-Visible="@IsVisible"
          Width="300px"
          Height="200px" ShowCloseIcon="true">
    <DialogEvents OnDragStop="OnDialogDragStop" 
                  OnOpen="OnDialogOpen"
                  OnClose="OnDialogClose">
    </DialogEvents>
    <DialogPositionData X="@XPosition" Y="@YPosition"></DialogPositionData>
    <DialogTemplates>
        <Header>Draggable Dialog</Header>
        <Content>
            This dialog will remember its position in the next session.
        </Content>
    </DialogTemplates>
</SfDialog>

<button @onclick="OpenDialog">Open Dialog</button>

@code {
    private SfDialog DialogObj;
    private bool IsVisible = false;
    private string XPosition = "center";
    private string YPosition = "center";
    private const string StorageKey = "DialogPosition";

    private void OpenDialog()
    {
        IsVisible = true;
    }

    private async Task OnDialogDragStop()
    {
        // Get the current position after dragging stops
        var position = await JSRuntime.InvokeAsync<object>("getDialogPosition", DialogObj.ID);

        // Save position to local storage
       // await JSRuntime.InvokeVoidAsync("localStorage.setItem", StorageKey, 
           // System.Text.Json.JsonSerializer.Serialize(position));
    }

    private async Task OnDialogClose()
    {
        // Save position on close as well
        var position = await JSRuntime.InvokeAsync<object>("getDialogPosition", DialogObj.ID);
      //  await JSRuntime.InvokeVoidAsync("localStorage.setItem", StorageKey, 
          //  System.Text.Json.JsonSerializer.Serialize(position));
    }

    private async Task OnDialogOpen()
    {
       // // Retrieve saved position from local storage
      //  var positionJson = await JSRuntime.InvokeAsync<string>("localStorage.getItem", StorageKey);


    }

    private class PositionData
    {
        public int X { get; set; }
        public int Y { get; set; }
    }
}
 

 

Regards,

Priyanka K

Attachment: GetDialogPosition_7db12582.zip