How to change display text in Toolbar option

Question

I want to change Excel Export to another text. How can I do that, thanks

Ajith Govarthan · Answer

Hi vuong xuan, 

Greetings from Syncfusion. 

Based on your query we have prepared sample in that we have added a custom toolbar item for excel export and in that we have added text to display the for the custom toolbar item and also we have added tooltip text to show when you hover the toolbar item and prefixIcon to show the excel export icon. Using the prefixIcon property you can use your own icon to display for the toolbar item. We have attached the prepared sample so please refer the sample for your reference. 

Code Snippet:  




app.component.ts 

    public ngOnInit(): void { 
        this.data = orderDetails; 
        this.toolbar = [{ text: 'Excel', tooltipText: 'ExcelExport', id: 'excel', prefixIcon:'e-excelexport' }, 'PdfExport', 'CsvExport']; 
        this.pageSettings = { pageCount: 5 }; 
    } 

    toolbarClick(args: ClickEventArgs): void { 
        switch (args.item.text) { 
            case 'PDF Export': 
                this.grid.pdfExport(); 
                break; 
            case 'Excel': 
                this.grid.excelExport(); 
                break; 
            case 'CSV Export': 
                this.grid.csvExport(); 
                break; 
        } 
    } 

Sample Link: https://stackblitz.com/edit/angular-r9cdjq-vu9xg2?file=app.component.ts 

Please get back to us if you need further assistance. 

Regards, Ajith G.