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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

DropDownButton not working as expected

Thread ID:

Created:

Updated:

Platform:

Replies:

143931 Apr 10,2019 09:52 PM UTC Apr 15,2019 07:17 AM UTC Angular - EJ 2 5
loading
Tags: Diagram
Gordon Brown
Asked On April 10, 2019 09:52 PM UTC

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

Ramya Thirugnanam [Syncfusion]
Replied On 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:  
  
Home.component.ts  
  
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')) {  
}  
}  
 
 
Regards, 
Ramya T 


Gordon Brown
Replied On 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?

Thanks

Gordon Brown 

Ramya Thirugnanam [Syncfusion]
Replied On 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.  
  
Regards  
Ramya T 


Gordon Brown
Replied On April 12, 2019 08:22 PM UTC

Ramya:

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.

Thanks,


Gordon Brown

Shyam G [Syncfusion]
Replied On April 15, 2019 07:17 AM UTC

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon