Grid Toolbar: Want to add additional button and bind click event to the new custom button

[Surabhi Gangwar]

Hi Team,

I am trying to add button(s) along with the default option provided by grid in the toolbar.

Example: Currently I have Add, Edit, PDFExport option. What I am trying to achieve is:

Add, Edit, PDFExport, MyCustomOption

And when I click on MyCustomOption, I can catch that event so I can take appropriate action.

Thank

[Surabhi Gangwar]

Able to find the solution. For the reference of other community users:

I was declaring the toolbar variable as :

toolbar!: ToolbarItems[];

And the try to add initialize like:

this.toolbar = ["Add", "Edit", "ColumnChooser", "PdfExport", "ExcelExport", "CsvExport", "Search",
                {
                    text       : 'Import',
                    tooltipText: 'Import Users',
                    prefixIcon : 'e-people',
                    id         : 'import'
                }, {
                    text       : 'DownloadTemplate',
                    tooltipText: 'Download Template',
                    prefixIcon : 'e-group-2',
                    id         : 'downloadTemplate'
                    }

                ];​

And getting error.

Solution:

Declare like:

toolbar!: any;

That will add Import and Download option in the toolbar (Referring above mentioned example)

html code:

<ejs-grid #grid
          [dataSource] = "usersData"
          [allowSorting] = "true"
          [allowFiltering] = "true"
          [allowGrouping] = "true"
          [editSettings] = "editSettings"
          [toolbar] = "toolbar"
          .
          .
          .​

[Rajapandiyan Settu]

Hi Surabhi,

Thanks for contacting Syncfusion support.

By setting the toolbar variable type as ToolbarItems[] | object, you can define both default and custom items in the toolbar property. Kindly refer to the below documentation for more information.

  public toolbar: ToolbarItems[] | object;

 

built-in and custom toolbar items: https://ej2.syncfusion.com/angular/documentation/grid/tool-bar/tool-bar-items/#both-built-in-and-custom-items-in-toolbar

When you click the toolbar button, the toolbarClick event will be triggered. In that event, you can perform your action based on the item.

toolbarClick: https://ej2.syncfusion.com/documentation/api/grid/#toolbarclick

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

Please get back to us if you need further assistance.

Regards,

Rajapandiyan S
If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.