We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Add a custom dropdown button to a grid toolbar

I want a dropdown list in the toolbar of the grid, like the columnChooser eg, I tried several options, but nothing works?

Thnxs in advanced

7 Replies

BS Balaji Sekar Syncfusion Team February 3, 2020 11:04 AM UTC

Hi Arnaud, 
Greetings from Syncfusion. 
Query#:  Need  dropdown list in the toolbar of the grid, 
We have analyzed your query and prepared sample based on your requirement. In that sample we have rendered a dropdown button component in the toolbar using toolbarTemplate feature  and the options were given as items for the dropdown. The dropdown component has select event which will be triggered when select the option values. Using the select event we have performed some of the operations in the Grid like editing, updating, deleting of particular row. Documentation and sample link shared  to know more about the DropdownButton component. 
Code snippet: 
public onSelect(args: any): void { 
        if(args.item.text === 'Update'){ 
        if(args.item.text === 'Edit'){ 
        if(args.item.text === 'Delete'){ 
          this.grid.deleteRow(this.grid.getContent().querySelectorAll('.e-row')[0] as any); 

<ng-template #toolbarTemplate let-data> 
                            <button ejs-dropdownbutton [items]='items' (select)='onSelect($event)' content='Edit Options'></button>` 
Documentation Links: 
Please get back to us, if you need further assistance. 
Balaji Sekar. 

AR Arnaud March 2, 2020 07:44 PM UTC


But the default Toolbar is gone. I want to comine it with the builtin actions eg ColumnChooser and SearchBox

Is that possible?


BS Balaji Sekar Syncfusion Team March 3, 2020 06:21 AM UTC

Hi Arnaud, 
Query: “I want to combine it with the builtin actions e.g., ColumnChooser and SearchBox. Is that possible? 
Yes, we can combine the  the built-in toolbar items with custom components in the Grid toolbar. In below code example we have add custom component using template property of toolbar component in Grid.  
Please refer the below code example and sample for more information. 
<ejs-grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 
   . . . . 
<ng-template #template let-data> 
    <ejs-checkbox label="Checkbox" [indeterminate]="true"></ejs-checkbox> 

public toolbarTemplate: any; 
public sliderTemplate: any; 
public ngOnInit(): void { 
    this.data = orderDetails; 
    this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' }; 
    this.toolbar = ['Add', 'Edit', 'Delete', ‘Search’, {template: this.toolbarTemplate},  {template: this.sliderTemplate}]; 
    . . . . . 

Please get back to us if you need further assistance on this. 
Balaji Sekar. 

MA Mukarram Ali November 17, 2022 12:17 PM UTC

In the above solution against showing  dropdown list button in the toolbar of the grid, I can't find any sample code.

Could you please provide a sample where we can show  dropdown list button in the gantt toolbar

you can use below sample code or any other sample code above where using gantt  chart.


GM Gopinath Munusamy Syncfusion Team November 21, 2022 07:25 AM UTC

Hi Mukarram,

The sample has been modified with a custom drop-down button in the toolbar. To achieve this, we have used a custom toolbar item of type button and then rendered the dropdown button using the Created event.  For your reference, sample and code snippets are attached. Check the sample and documentation links below for more details.

Code Snippets:



public menuItemsss = [


      text: 'Cut',



      text: 'Copy',



      text: 'Paste',



public Created() {

    new DropDownButton(


        content: 'DropDownButton',

        items: this.menuItemsss,






this.toolbar = [





        type: 'Button',

        text: 'DropDownButton',

        align: 'Right',

        template: '<button id="dropDownButton"></button>',






<ejs-gantt #ganttToolbar



Sample: https://stackblitz.com/edit/angular-ommbgt-bkxztu?file=app.component.ts,app.component.html

UG Documentation: https://ej2.syncfusion.com/angular/documentation/gantt/toolbar/#custom-toolbar-items


Gopinath M

MA Mukarram Ali November 21, 2022 08:03 AM UTC

the dropdownButton and dropdown list options are not in sync, it is moving away on changing screen size or if we open brower console etc. so this option list should stick to button.

GM Gopinath Munusamy Syncfusion Team November 22, 2022 11:36 AM UTC

Mukarram, using the toggle method, we can close the dropdown button popup for zoom in/out. For your reference, a sample and code snippets are attached. Check the sample and code snippets below for more details.

Code Snippets:



window.addEventListener("resize", function() {

      var popupElem = document.getElementsByClassName('e-popup-open');

      if (popupElem.length != 0) {




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

Live Chat Icon For mobile
Up arrow icon