Search results

Draggable in Blazor Dialog component

The Dialog supports to drag within its target container by grabbing the Dialog header, which allows the user to reposition the Dialog dynamically.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons

<div id="target">
    <SfButton @onclick="@OnClicked">Open Dialog</SfButton>
    <SfDialog @bind-Visible="@IsVisible" Target="#target" Width="250px" AllowDragging="true" IsModal="true" ShowCloseIcon="true">
            <Header> Dialog</Header>
            <Content> This is a Dialog with drag enabled</Content>
            <DialogButton OnClick="@OnClick">
                <DialogButtonModel Content="OK" IsPrimary="true"></DialogButtonModel>
            <DialogButton OnClick="@OnClick">
                <DialogButtonModel Content="Cancel"></DialogButtonModel>

    #target {
        min-height: 400px;
        height: 100%;
        position: relative;

@code {
    private bool IsVisible { get; set; } = true;

    private void OnClick()
        this.IsVisible = false;

    private void OnClicked()
        this.IsVisible = true;