We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

DropDownButton not working as expected

I am working on a little project to convert the Angular Diagram Builder showcase project to version 7 from version 5 of Angular.

The project is now mostly working except for the menu. Initially, it didn't open at all. After some debugging, I traced it to arrangeMenuBeforeOpen in home.component.ts

public arrangeMenuBeforeOpen(args: BeforeOpenCloseArgs): void {
     (args.element.children[0] as HTMLElement).style.display = 'block'
     if (args.event && closest(args.event.target as Element, '.e-dropdown-btn') != null {
          args.cancel = true;

it was hitting the args.cancel = true line. In angular 5 args.event is null, but in Angular 7 it is a mouse event. After commenting out this line the menu is opening properly, but now the dropdown stays open.  See attached.

Attachment: MenuIssue.PNG_d254124c.zip

5 Replies

RT Ramya Thirugnanam Syncfusion Team April 11, 2019 12:28 PM UTC

Hi Gordon,  
The reported issue doesn’t occur due to upgrading from Angular 5 to Angular 7. In latest version, the dropdown component has some changes. So that the menu items are not shown. Please replace the below code example in menumouseover method in your application to resolve your issue.  
Code example:  
public menumouseover(args: MouseEvent): void {  
        let target: any = args.target as HTMLButtonElement;  
        if (target && (target.className === 'e-control e-dropdown-btn e-lib e-btn db-dropdown-menu' ||  
            target.className === 'e-control e-dropdown-btn e-lib e-btn db-dropdown-menu e-ddb-active')) {  
Ramya T 

GB Gordon Brown April 11, 2019 06:48 PM UTC

Thanks for clarifying that this is due to changed behaviour in dropdownbutton. 

Unfortunately updating the menumouseover code reverts it to not working at all. Are you sure this code is correct? It appears to do nothing at all. It is basically an if statement that does nothing.

Do you have a working demo, preferably using Angular with the latest dropdownbutton?


Gordon Brown 

RT Ramya Thirugnanam Syncfusion Team April 12, 2019 10:46 AM UTC

Hi Gordon, 
We have created an angular builder sample with angular 7. Please find the sample in below link  
In this sample, we have used the latest version of EJ2-Components with release version of 17.1.40. In this sample, the drop down works properly and in arrangeMenuBeforeOpen event the args.event is coming as null and  menu items are display and works properly.  
Could you please modify the sample and revert us in case if the issue persists? This will be help us to serve better.  
Ramya T 

GB Gordon Brown April 12, 2019 08:22 PM UTC


Thanks this works great. 

Any chance that you have any sample code for using swim lanes in Angular with ej2? This is a critical feature for us. I am trying to figure out how to create the palettes and it is not clear.


Gordon Brown

SG Shyam G Syncfusion Team April 15, 2019 07:17 AM UTC

Hi Gordon, 
We have created a swim lane sample in Angular and provided a link below. 
Shyam G 

Live Chat Icon For mobile
Up arrow icon