Draggable in Predefined Dialogs

10 Aug 20224 minutes to read

The predefined dialogs supports dragging within its target container by grabbing the dialog header, which allows the user to reposition the dialog dynamically by using the DialogOptions.AllowDragging property.

alert.razor

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons
@inject SfDialogService DialogService
    <div>
        <SfButton @onclick="@AlertBtn">Alert</SfButton>
    </div>
@code {
    private async Task AlertBtn()
    {
        await DialogService.AlertAsync("10% of battery remaining", "Low Battery", new DialogOptions()
            {
                AllowDragging = true,
            });
        }    
}

confirm.razor

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons
@inject SfDialogService DialogService
    <div>
        <SfButton @onclick="@ConfirmBtn">Confirm</SfButton>
    </div>
@code {
        private async Task ConfirmBtn()
        {
            bool isConfirm = await DialogService.ConfirmAsync("Are you sure you want to permanently delete these items?", "Delete Multiple Items", new DialogOptions()
            {
                 AllowDragging = true,
            });
    }
}

prompt.razor

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons
@inject SfDialogService DialogService
    <div>
        <SfButton @onclick="@PromptBtn">Prompt</SfButton>
    </div>
@code {
    private async Task PromptBtn()
    {
        string promptText = await DialogService.PromptAsync(null, "Join Wi-Fi network", new DialogOptions()
        {
            AllowDragging = true,
            ChildContent = @<table class="Table">
                    <tbody>
                        <tr>
                            <td>SSID:</td>
                        </tr>
                        <tr>
                            <td><b>AndroidAP</b></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                        </tr>
                        <tr>
                            <td>
                                <span class="e-input-group">
                                    <input type="password" id="password" name="Required" class="e-input">
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
        });
    }
}