Search results

Open a dialog on popup item click

This section explains about how to open a dialog on DropdownButton popup item click. This can be achieved by handling dialog open in ItemSelected event of the DropdownButton.

In the following example, Dialog will open while selecting Other Folder... item.

@using Syncfusion.EJ2.Blazor.SplitButtons
@using Syncfusion.EJ2.Blazor.Popups
@using Syncfusion.EJ2.Blazor.Buttons

<EjsDropDownButton Items="@Items" IconCss="e-icons e-setting-icon" CssClass="e-vertical" IconPosition="SplitButtonIconPosition.Top" ItemSelected="select">Settings</EjsDropDownButton>
<EjsDialog Content="@Content" Header="@Header" Width="250px" Height="150px" Visible="false" @ref="DialogObj" >
    <DialogPositionData X="300" Y="200"></DialogPositionData>
    <DialogButtons>
        <DialogButton ButtonModel="@OkBtn" OnClick="click"></DialogButton>
        <DialogButton ButtonModel="@CancelBtn" OnClick="click"></DialogButton>
    </DialogButtons>
</EjsDialog>

@code  {
    EjsDialog DialogObj;
    public string Content = "Are you sure want to update?";
    public string Header = "Software Update";
    public List<ItemModel> Items = new List<ItemModel>{
        new ItemModel{ Text = "Help" },
        new ItemModel{ Text = "About" },
        new ItemModel{ Text = "Update" }
        };

    public ButtonModel OkBtn = new ButtonModel { Content = "Ok", IsPrimary = true, CssClass = "e-flat" };
    public ButtonModel CancelBtn = new ButtonModel { Content = "Cancel", IsPrimary = true, CssClass = "e-flat" };

    private void click(object args)
    {
        DialogObj.Hide();
    }

    private void select(MenuEventArgs args)
    {
        if (args.Item.Text == "Update")
        {
            DialogObj.Show();
        }
    }
}

<style>
    .e-setting-icon::before {
        content: '\e679';
    }
</style>

Output be like

Button Sample