1. Home
  2. Forum
  3. Angular - EJ 2
  4. Customize ribbon tabs

Customize ribbon tabs

I need to add custom ribbon tab and defined its' child components as in below screenshot.I have followed instruction  in this page but couldn't proceed further. https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/?_gl=1*1my432d*_ga*MTUxODQyOTI4NC4xNjMxNjA3Mjgx*_ga_WC4JKKPHH0*MTYzMjA1NjQxOC4yMC4xLjE2MzIwNTc1MTcuMA..&_ga=2.123655055.521482534.1632056421-1518429284.1631607281#addribbontabs

Could you please provide me an example which has following features.

  1. Add dropdown filed as a child to custom ribbon tab (i.e "Custome")
  2. Bind and event to above above dropdown field 





5 Replies
JS Janakiraman Sakthivel Syncfusion Team September 20, 2021 12:42 PM UTC

Hi Rahal Ekanayaka, 
 
Thank you for contacting Syncfusion support. 
 
We have checked your reported requirement and it can be achievable in our spreadsheet by using the template option in addToobarItems method as like as below. 
 
 
   this.spreadsheetObj.addRibbonTabs([ 
      { 
        header: { text: 'Custom' }, // To add customized option with sub option 
        content: [ 
          { 
            id: 'CustomButton', 
            tooltipText: 'CustomButton', 
            template: this.appendDropdownBtn('custombtn') 
          } 
        ] 
      } 
    ]); 
 
  public appendDropdownBtn(id: string): HTMLElement { 
    let ddlItems: ItemModel[] = [ 
      { 
        text: 'Custom Text1' 
      }, 
      { 
        text: 'Custom Text2' 
      } 
    ]; 
    let btnObj: DropDownButton = new DropDownButton({ 
      items: ddlItems, 
      content: 'Custom', 
      select: (args: MenuEventArgs): void => { 
        alert(args.item.text + ' clicked'); 
      } 
    }); 
    btnObj.appendTo(createElement('button', { id: id })); 
    return btnObj.element; 
  } 
 
 
For your convenience, we have prepared the sample based on our suggestion. Please find the link below. 
 
 
API Link: 
 
Could you please check the above details and get back to us, if you need any further assistance on this. 
 
Regards, 
Janakiraman S.

RE Rahal Ekanayaka September 22, 2021 11:56 PM UTC

Hi Janakiraman,

Your sample helped me to resolve my problem. Thank you for your support.

I have new requirement that add a button with prefix icon to ribbon tab as in following example


I tried prefixIcon property without any success as below. Could you please help me to get this work and point me where I can find syncfusion icon repository?


this.spreadsheetObj.addRibbonTabs([
{ header: { text: 'Graphshare' },
content: [
{ text: 'Load',
tooltipText: 'Custom Btn',
prefixIcon: 'arrow-left-2',
click : () => {
this.openObjectDialog();
}
}
]},
]);



JS Janakiraman Sakthivel Syncfusion Team September 24, 2021 03:51 AM UTC

Hi Rahal Ekanayaka, 
 
We have checked your reported requirement and we would let you know that we are able to add the icon in the EJ2 Button by using the iconCss property as like in the below code example.  
 
 
let btnObj: DropDownButton = new DropDownButton({ 
      items: ddlItems, 
      content: 'Custom', 
      iconCss:"ddb-icons e-search", 
      select: (args: MenuEventArgs): void => { 
        alert(args.item.text + ' clicked'); 
      } 
    }); 
    btnObj.appendTo(createElement('button', { className: 'e-icons', id: id })); 
 
 
For your convenience, we have prepared a sample based on your requirement. Please find the link below. 
 
 
Documentation link:  
 
Regards, 
Janakiraman S. 


RE Rahal Ekanayaka September 24, 2021 09:09 AM UTC

Thank you for the sample. However I am interesting on now is to add prefix icon (using prefixIcon) to button as in below screenshot.



JS Janakiraman Sakthivel Syncfusion Team September 27, 2021 12:42 PM UTC

Hi Rahal Ekanayaka, 
 
Thank you for your update. 

We have checked your reported query and we would like to let you know that your requirement can be achievable by using the "iconCss" property of the DropDownButton. And you can position the icon before or on top of the text content in the DropDownButton by using the "iconPosition". For more details, please refer the below links: 
 
API Link:  
 
For your convenience, we have prepared the sample and video demonstration of this issue. Please find the link below. 
 
 
 
 
Could you please check the above links and get back to us if we misunderstood your requirement or if you need any further assistance on this? 
 
Regards, 
Janakiraman S. 


Loader.
Up arrow icon