DropDown button in Toolbar

[Domantas]

Hello,

Having issue when adding DropDownButton (or any of other drop downs) in toolbar. I'm adding it with template property, but button doesn't work as expected. It opens the drop down list, but the drop down list appears at 0;0 position.

[Balaji M]

Hi Domantas,  

  

Thanks for contacting Syncfusion support.  

Based on your shared screenshots, we have tried to replicate your reported issue by adding but DropDownButton in the toolbar but unfortunately, we were unable to replicate it. The DropDownButton opens normally without any issues and we even added DropDownList and even that worked fine only. Since the other components are added via template to Toolbar items, it renders the exact component as given in template without any issue. So we suspect that issue might be because of the conflict with any of your external CSS references with the toolbar or below details. So we request you to check your CSS class references. 

Hence if you still face any issue means, please let us know the below details. 

•    Open your console window and check for any console errors and share the issue screenshot or video, if any? 

•    If possible, please use our sample to reproducible your issue to validate from our side?  

•    What is the current Syncfusion version that you are using? 

•    Share your browser version  

•    Share us your code snippets + your application CSS rules if possible? 

 

Demo sample:  https://stackblitz.com/edit/github-lushmu-e2kenk?file=src%2Fapp%2Fapp.component.html 

 

Please provide the above asked details so that we can provide a solution as earliest.    

 
Regards,
M. Balaji 

[Domantas]

Thank you for your answer. I got it working by looking at the demo. And i have one more question. Can i have somehow DropDownButton item as another DropDownButton. I tried applying ItemModel for items and then assign template but that did not work for me.

It should look something like this:

[Vinoth Kumar Sundara Moorthy]

Hi Domantas, 

 

Thank you for your update. 

 

We have checked your query and the requirement “To show the DropDownButton item as another DropDownButton” is not feasible. However, we have provided the work around solution by using the context menu inside the Dropdown button to show the submenu. Please refer the below code example and the sample to achieve your requirement. 

 

app.component.html  

<div> 

    <ejs-toolbar #element> 

        <e-items> 

            //.. 

            <e-item [template]='content2' type="Button"></e-item> 

        </e-items> 

    </ejs-toolbar> 

</div> 

 

<ejs-contextmenu #contextmenu id="contextmenu" [items]='menuItems' (onOpen)="onOpen($event)" cssClass="arrangeMenu" [animationSettings]='animationSettings'></ejs-contextmenu> 

 

<ng-template #content2> 

    <button ejs-dropdownbutton #dropdownbtn id='template' target='.e-contextmenu-wrapper' content="Message" (beforeOpen)="beforeOpen($event)" (beforeClose)="beforeClose($event)"></button> 

</ng-template> 

 

app.component.ts 

export class AppComponent { 

        public animationSettings: MenuAnimationSettings = { effect: 'None' }; 

        //Context menu item description 

        public menuItems: MenuItemModel[] = [ 

        //.. 

        ]; 

        //For positioning sub menu 

        public onOpen(args: OpenCloseMenuEventArgs) { 

            if (args.element.classList.contains('e-menu-parent')) { 

                let popup: any = document.querySelector('#template-popup'); 

                args.element.style.left = (parseInt(args.element.style.left) - parseInt(popup.style.left)).toString() + 'px'; 

                args.element.style.top = (parseInt(args.element.style.top) - parseInt(popup.style.top)).toString() + 'px'; 

            } 

        } 

        //To prevent closing the Dropdown button popup, while showing sub menu 

        public beforeClose(args: BeforeOpenCloseMenuEventArgs) { 

            if ((args.event.target as Element).classList.contains('e-menu-caret-icon')) { 

                args.cancel = true; 

            } 

        } 

        //To make context menu visible on Dropdown button click 

        public beforeOpen(args: BeforeOpenCloseMenuEventArgs){ 

            (args.element.children[0] as HTMLElement).style.display = 'block'; 

        } 

    } 

 

Demo Sample: 

https://stackblitz.com/edit/angular-ngs25q?file=src%2Fapp%2Fapp.component.html 

 

Could you please check the above sample and get back to us if we misunderstood your requirement or you need any further assistance? 

 

Regards, 

Vinoth Kumar S 

[Domantas]

Hello,

Thank you for your answer. I got it working by looking at your example, but the day goes on and another issue appears. So it is all fine with hardcoded items. But when i need to push new items, strange things starting to happen. 

I'll try to explain as clear as possible. As you see in picture below i got my MenuItemModel with some hardcoded items and then i'm trying to push new items.

When i'm pushing only one item, the variable gets updated correctly, but the context menu doesn't show the item.

And here's what happens when i push two items. The first item still doesn't even show in the context menu, but looks fine in variable. The second item I pushed appears in context menu item and in variable, but then it comes with the error "Cannot read property 'parentNode' of undefined".

[Vinoth Kumar Sundara Moorthy]

Hi Domantas, 

 

Thank you for your update. 

 

We have checked your reported query and we suspect that you are trying to add new items dynamically in DropDownButton option lists. So, we would like to suggest you to use ‘insertAfter()’ method to achieve your requirement. Please refer the below modified code example. 

 

app.component.ts 

public cMenuObj: ContextMenuComponent; 

public itemsAdded: boolean = false; 

 

public beforeOpen(args: BeforeOpenCloseMenuEventArgs){ 

    (args.element.children[0] as HTMLElement).style.display = 'block'; 

 

    if(!this.itemsAdded){ 

 

        //for inserting items in contextmenu 

        let newItems: MenuItemModel[] = [{ 

            text: 'five', 

            id: '6' 

        },{ 

            text: 'six', 

            id: '7' 

        }]; 

        // newItems will be added after the item "Log out" 

        this.cMenuObj.insertAfter(newItems,'Log Out'); 

        this.itemsAdded = true; 

    } 

} 

 

Demo Sample: https://stackblitz.com/edit/angular-gieugo?file=src/app/app.component.ts 

 

Documentation link: 

https://ej2.syncfusion.com/16.1.37/angular/documentation/context-menu/api-contextMenuComponent.html#insertafter 

https://ej2.syncfusion.com/16.1.37/angular/documentation/context-menu/api-contextMenuComponent.html#insertbefore 

 

Could you please check the above sample and get back to us if you face any issues or need further assistance? 

 

Regards, 

Vinoth Kumar S