How to add a router link in the toolbar in Angular Grid

[Edson Rodríguez]

Hi,

I want to add a router link in the toolbar of the grid, I wonder if it is possible to do.

  toolbarClick(args: ClickEventArgs):void{

    if(args.item.text === "Excel Export")

    {

      var prop: ExcelExportProperties = {

        fileName: ('Excel'+ this.myFormattedDate +'.xlsx'),

      }

      this.grid.excelExport(prop);

    }

  }

[Ajith Govarthan]

Hi Edson, 

Greetings from Syncfusion. 

To achieve your requirement we have used toolbar template feature of EJ2 Grid. In the attached sample we have added excel export and router link button in the toolbar. So, when you click the link button it will add “home” in the link and the Excel export button will export the grid as excel document. 

Code Snippet:  

app.component.html 

<div class="control-section e-tab-section"> 

              <div class="e-sample-resize-container"> 

                             <ejs-grid #grid [dataSource]='data' id='Grid' [allowExcelExport]='true'> 

              <ng-template #toolbarTemplate let-data> 

                    <ejs-toolbar (clicked)='clickHandler($event)'> 

                        <e-items> 

                            <e-item id='routerlink' [routerLink]="['/home']" prefixIcon="e-edit" text="Link"> </e-item> 

                            <e-item id='ExcelExport' prefixIcon='e-excelexport' text="Excel Export"></e-item> 

                        </e-items> 

                    </ejs-toolbar> 

                </ng-template> 

Sample link: https://stackblitz.com/edit/angular-263829-toggle-grid-view-in-card-frya9s?file=app.component.html 

Please get back to us if you need further assistance. 

Regards, 

Ajith G.