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
  1. Home
  2. Forum
  3. Angular
  4. Change toolbar tooltip
Starting in 2019, the Reporting control is no longer included in Essential Studio. If you're experiencing issues with the Syncfusion Reporting Platform, Report Viewer, Report Designer, or Report Writer, we recommend migrating to Bold Reports, our dedicated reporting platform.

Bold Reports offers a comprehensive suite of tools and features for all your reporting needs, and we will help you make a smooth transition from the discontinued control. Our support team at https://support.boldreports.com/ is here to assist you with any questions or difficulties you may encounter during the migration process.

We thank you for choosing Syncfusion and appreciate your understanding.

Change toolbar tooltip

Hi,

Can we Change Tool Tip of ReportViewer's Toolbar if yes please suggest how?
Please refer attached SceenShot.

Thanks

Attachment: Syncfusion_PrintOption_Tooltip_a0996a5d.rar

2 Replies
MS Mahendran Shanmugam Syncfusion Team November 23, 2018 12:16 PM UTC

Hi chiranjiv, 

Thanks for your interest in Syncfusion product. 

In Angular application supports to localize the tooltip text using locale option in control render page as show in the following code example, 

App.madule.ts 
import { Routes } from '@angular/router'; 
import { GridComponent } from './grid/grid.component'; 
import { ReportViewerComponent } from './reportviewer/reportviewer.component'; 
import { HomeComponent } from './home/home.component'; 
import { EJAngular2Module } from 'ej-angular2'; 
import 'node_modules/syncfusion-ej-global/i18n/ej.culture.de-DE.min.js';  
import 'node_modules/syncfusion-ej-global/l10n/ej.localetexts.de-DE.min.js'; 

export const rootRouterConfig: Routes = [ 
    { path: '', redirectTo: 'home', pathMatch: 'full' }, 
    { path: 'home', component: HomeComponent }, 
    { path: 'grid', component: GridComponent }, 
              { path: 'reportviewer', component: ReportViewerComponent } 
]; 
  
Reportviewer.component.ts 
import { Component } from '@angular/core'; 

@Component({ 
    selector: 'ej-app', 
    templateUrl: 'src/reportviewer/reportviewer.component.html',            
              styleUrls: ['src/reportviewer/reportviewer.component.css'] 
}) 

export class ReportViewerComponent { 
    public serviceUrl: string;     
    public reportPath: string; 
              public serverUrl: string;  
              public locale: string; 
              public parameters: any; 

    constructor() {         
                             this.serviceUrl = 'http://localhost:3994/api/ReportApi';          
        this.reportPath = '~/App_Data/Case Summary.rdl'; 
                             this.locale ='de-DE'; 
    }          
} 

Reportviewer.component.html 
<!DOCTYPE html> 
    <html> 
<head>  

    </head> 
              <body> 
<ej-reportviewer id="reportViewer_Control" 
              [reportServiceUrl] = "serviceUrl"  
              [processingMode] = "Remote" 
              [reportServerUrl] = "serverUrl" 
              [reportPath] = "reportPath"  
              [dataSources]="reportData"  
              [parameters] = "parameters" 
              (reportError)="reportError($event)" 
              [locale]="locale"> 
</ej-reportviewer> 
</body> 
</html> 

We have prepared the sample for your reference and it can be downloaded from below location. 

Output snap: 
 

We have added the some localization file only added in our node modules. So can you please share your language code(Ex:”en-UE”) to provide the file for your language code. 

Regards, 
Mahendran S. 


CH chiranjiv November 30, 2018 07:51 AM UTC

Thank you so much for help. It works fine

Loader.
Up arrow icon