DropDownButton not working as expected

[Gordon Brown]

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]

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]

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]

Hi Gordon, 

  

We have created an angular builder sample with angular 7. Please find the sample in below link  

  

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Angular7-Diagram_Builder122847209   

  

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]

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]

 

Hi Gordon, 

 

We have created a swim lane sample in Angular and provided a link below. 

 

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

 

Regards, 

Shyam G