Create dropdown button in spreadsheet Ribbon Menu

Question

Create a dropdown button in the Ribbon menu.

I have this code:

openFromURL(){
        this.spreadsheet.addRibbonTabs([{ header: { text: 'My Options' }, content: [{ text: 'Options', tooltipText: 'Options',
            click: (args: ClickEventArgs): void => { 
            } }

          ] }],
          );

  }

But I don't know how to convert it into a dropdown option.

This would be my idea:

Have a dropdown with the options of:

Customers

Suppliers->

local

external

Payments

thanks for your help

Sangeetha Priya Murugan · Answer

Hi Raymond,Your requirement can be achievable by rendering the menu as a target for
dropdown button element in the template property as shown below.Code Block:

created() {
      this.spreadsheetObj.addRibbonTabs([
        {
          header: { text: 'My Options' },
          content: [
            {
              text: 'Options',
              tooltipText: 'Options',
              template: this.appendDropdownBtn('custombtn'),
            },
          ],
        },
      ]);
    }
   
    public appendDropdownBtn(id: string): HTMLElement {
      let target = createElement('ul', { id: 'customUl' });
      let menuObj: Menu;
      let btnObj: DropDownButton = new DropDownButton({
        createPopupOnClick: true,
        content: 'Options',
        target: target,
        beforeOpen: (): void => {
          if (!this.isMenuAppended) {
            menuObj = this.appendMenu(target);
          }
        },
        beforeClose: (): void => {
          this.isMenuAppended = true;
        },
      });
   
      btnObj.appendTo(createElement('button', { id: id }));
   
      return btnObj.element;
    }
   
    public appendMenu(target) {
      let menuObj: Menu = new Menu({
        items: this.ddlItems,
        orientation: 'Vertical',
        select: (args: MenuEventArgs): void => {
          alert(args.item.text + ' clicked');
        },
      });
      menuObj.appendTo(target);
      target.classList.add('e-ul');
      return menuObj;
    }

Sample Link: https://stackblitz.com/edit/angular-yz68dy-v6ovzd?file=src%2Fapp.component.ts
Demo Link: https://ej2.syncfusion.com/demos/#/material3/button/dropdown-button
https://ej2.syncfusion.com/demos/#/material3/menu/default.html
Documentation Link: https://ej2.syncfusion.com/documentation/drop-down-button/how-to/group-popup-items-with-listview-component
Please check the above sample and kindly get back to us, if you need any
further assistance on this. NOTE: If this post is helpful,
please mark it as an answer so that other members can locate it more quickly.