Prevent DropdownButton target from Closing

[Glen Alexander]

Hi,

I'm using the DropdownButton that uses a template that has a few more controls within it such as radio button, textbox, datepicker, dropdownlist. I can open the template no problem when clicking on the DropdownButton targetr attribute, but if I make a selection using the Datepicker, or DropdownList within the template it closes the target window. 

How can I prevent the target window from closing when making selections from controls within it?

<div id="target">

... more controls and HTML here ...

</div>

<button ejs-dropdownbutton target='#target' class="due-date e-small" content='Select due date'></button>

Attachment: Capture_654c26da.zip

[Glen Alexander]

Hi, I found a way to keep the target window open using the 

(beforeClose)="beforeClose($event)" 

and 

public beforeClose(args) {

        args.cancel = true;

    }

Now I need to know how to close the popup using a button within the target window, could you please explain how to achieve that?

[Janakiraman Sakthivel]

Hi Glen Alexander, 

 

We can achieve your requirement by using the below highlighted code. 

 

[app.component.ts]:       

public beforeClose (args: BeforeOpenCloseMenuEventArgs) { 

        if (args.event.target && !(args.event.target as Element).closest(".e-dropdown-btn")) { 

              args.cancel = true; 

        } 

} 

  

For your convenience, we have prepared the sample to achieve your requirement. Please find the sample link below, 

 

Sample Link: https://stackblitz.com/edit/angular-nvdwvu?file=app.component.ts 

 

Please let us know if you have any queries. 

 

Regards, 

Janakiraman S. 

[Prachi Chaturvedi]

Hi.. Is there a way to do the same in Blazor?

[YuvanShankar Arunagiri]

Hi Prachi,

Yes, we can do it in blazor platforms. Using the OnClose vent of Dropdown menu component, we can achieve your requirement. Refer to the below code snippet.

@using Syncfusion.Blazor.SplitButtons

 

<SfDropDownButton Content="Profile">

    <DropDownButtonEvents OnClose="OnClose">

    </DropDownButtonEvents>

    <DropDownMenuItems>

        <DropDownMenuItem Text="Dashboard" Id="Dashboard"></DropDownMenuItem>

        <DropDownMenuItem Text="Notifications" Id="Notifications"></DropDownMenuItem>

        <DropDownMenuItem Text="User Settings" Id="UserSettings"></DropDownMenuItem>

        <DropDownMenuItem Text="Log Out" Id="LogOut"></DropDownMenuItem>

    </DropDownMenuItems>

</SfDropDownButton>

 

@code {

    private void OnClose(BeforeOpenCloseMenuEventArgs args)

    {

        args.Cancel = true;

    }

}

Get back to us if you need any further assistance on this.

Regards,

YuvanShankar A