Search results


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.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Popups
@using Syncfusion.EJ2.Blazor.Buttons

<div id="target">
    <EjsButton @onclick="@OnClicked">Open Dialog</EjsButton>
    <EjsDialog @ref="DialogObj" Target="#target" Width="250px" AllowDragging="true" IsModal="true" ShowCloseIcon="true">
            <Header> Dialog</Header>
            <Content> This is a Dialog with drag enabled</Content>
            <DialogButton ButtonModel="@OkBtn" OnClick="@OnClick" />
            <DialogButton ButtonModel="@CancelBtn" OnClick="@OnClick" />

    #target {
        min-height: 450px;
        height: 100%;

@code {
    EjsDialog DialogObj;

    private void OnClick(Object args)

    private void OnClicked() {

    public Syncfusion.EJ2.Blazor.Buttons.ButtonModel OkBtn = new Syncfusion.EJ2.Blazor.Buttons.ButtonModel { Content = "OK", IsPrimary = true };
    public Syncfusion.EJ2.Blazor.Buttons.ButtonModel CancelBtn = new Syncfusion.EJ2.Blazor.Buttons.ButtonModel { Content = "Cancel" };