DropDownButton not working as expected

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

Reply | Reply with quote

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

Reply | Reply with quote

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

Reply | Reply with quote

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

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

Reply | Reply with quote

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

Reply | Reply with quote

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.

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

Regards,

Shyam G

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US