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

Want to put ngx-translate pipe in headerText of e-column

Hi,

Quick reply will be needed. 

I am trying to use translate pipe for header text but it is not working. Can you tell me how to use it ? 

Please share an example on how it will work with ngx-translate .

I have tried various ways but it does not work:

<e-column field="EntityDisplayName" type="string" [filter]="{type: 'CheckBox'}"><span>{{ 'RELATIONSHIP.ENTITY' | translate }}</span></e-column>

<e-column field="EntityDisplayName" type="string" [filter]="{type: 'CheckBox'}"><span>{{ 'RELATIONSHIP.ENTITY' | translate }}</span></e-column>

<e-column field="EntityDisplayName" headerText="" type="string" [filter]="{type: 'CheckBox'}">{{ 'RELATIONSHIP.ENTITY' | translate }}</e-column>

<e-column field="EntityDisplayName" headerText="{{ 'RELATIONSHIP.ENTITY' | translate }}" type="string" [filter]="{type: 'CheckBox'}"></e-column>

9 Replies

PS Pavithra Subramaniyam Syncfusion Team September 23, 2019 05:15 AM

Hi shweta, 
  
Thanks for contacting Syncfusion Support.  
  
QUERY: I am trying to use translate pipe for header text but it is not working. Can you tell me how to use it ?  
  
You can use ngx-translate to translate the headerText of grid’s column by using the translate pipe for “headerText” property.   
  
Please refer the below code snippet,  
  
In grid.component.html  
  
<ejs-grid id="Grid" [dataSource]="gridData" allowPaging="true"  >  
    <e-columns>  
        <e-column field="OrderID" [isPrimaryKey]="true" headerText="{{ 'Value' | translate }}"></e-column>  
      <e-column field="Freight" headerText="Freight" ></e-column>  
 </e-columns>  
</ejs-grid>  
  
In grid.component.ts  
  
import { Component } from '@angular/core';  
import {TranslateService} from '@ngx-translate/core';  
  
@Component({  
    selector: 'app-root',  
    templateUrl: '. /grid.component.html',  
})  
export class GridComponent {  
  
  constructor(translate: TranslateService) {  
     translate.addLangs(['en', 'fr']) // tells the service which languages are available for translation  
     translate.setDefaultLang('en');  // allows to specify  set of translation to use in case there are missing  translation for current language  
      translate.use('fr');//  tells the service which is current language  
        }   
       
  
In assets/i18n/en.json  
  
{  
    "Value": "Order ID!" 
}  
    
  
  
In assets/i18n/fr.json  
  
{  
     "Value": "numéro de commande!"   
}  
    
  
   
   
  
Please refer the below link,  
  
Please refer the below sample,  
  
If you have further queries, please get back to us.  
 
Regards, 
Pavithra S. 



SH shweta September 24, 2019 08:22 AM

Hi Pavithra,

Thanks for your reply. But this does not seems to work for me. Tranlations are getting loaded for all other titles and buttons inside my application but not for headerText of ejs-grid. Also the example you have shared consists of npm errors and does not work. 

Note: I know how to add translations in any application. My query is that they are not getting loaded for headerText. 

<e-column field="OrderID" [isPrimaryKey]="true" headerText="{{ 'Value' | translate }}"></e-column>  

This shows Value in the UI. and not "Order ID!". 

Let me know if you have any solution for this. My angular version is 5.2.5 and ngx-translation version is 9.1.1. 



PS Pavithra Subramaniyam Syncfusion Team September 25, 2019 04:05 AM

Hi Shweta, 

Thanks for your update. 

We have downgraded  to your angular version and tried to apply the translations. It is working fine at our end. Please find the below screenshot of angular details and sample for more information. 

Screenshot: 

 


Please check the above sample which is prepared in angular version 5. If you still faced the issue share the Syncfusion package version, try to reproduce the issue in our given sample and revert to us or share the issue reproducible sample. 

Regards, 
Pavithra S. 



SH shweta September 27, 2019 09:54 AM

Hello Pavithra,

Thanks for the reply. it worked for me somehow. :) 

I have another query I want to use translate pipe or diretive inside [toolbar] property of ejs-grid. 

<ejs-grid (toolbarClick)="toolbarClick($event)" [toolbar]="toolbar"></ejs-grid>

In my constructor of the respective compoenent I have toolbar defined as:

this.toolbar = [
            { template: '<button class="btn btn-secondary btn-toolbar">all</button>'id: 'selectall' },
            { template: '<button class="btn btn-secondary btn-toolbar">Only Valid</button>'id: 'selectallvalid' },
            { template: '<button class="btn btn-secondary btn-toolbar">None</button>'id: 'selectnone' }

        ];

Now I want to put translations here. Like in place of "all" I want to use {{ 'RELATIONSHIP.ALL' | translate }} or translate directive. since it
is inside component it does not picks the translation value(all) from the file.

Let me know if it is possible.

Thanks.




PS Pavithra Subramaniyam Syncfusion Team September 30, 2019 03:20 AM

Hi shweta, 
 
Thanks for your update. 
 
We are happy to hear that the translation is working. 
 
Query: I have another query I want to use translate pipe or directive inside [toolbar] property of ejs-grid. 
 
You can achieve your requirement by using the “ngx-template” as below. Please refer to the below code example for more information. 
 
[component.html] 
<div> 
  <ejs-grid #grid [toolbar]='toolbar' [dataSource]="dataSource"> 
    <e-columns> 
      .  .  . 
    </e-columns> 
  </ejs-grid> 
</div> 
<ng-template #toolbar1> 
  <button class="btn btn-secondary btn-toolbar">{{ 'All' | translate }}</button> 
</ng-template> 
  
 
[component.ts] 
 
@Component({ 
  selector: 'app-root', 
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.css'], 
}) 
export class AppComponent implements OnInit { 
   
  @ViewChild("toolbar1") 
  public toolbar1: any; 
 
  constructor(private translate: TranslateService) { 
    translate.addLangs(['en''fr']) // tells the service which languages are available for translation  
    translate.use('fr');//  tells the service which is current language  
     } 
 
   
  ngOnInit() { 
    this.toolbar = [ 
      { template: this.toolbar1, id: 'selectall' }, 
      .  .  .         
  ]; 
  } 
} 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 



LD Luu Duc Cuong March 13, 2020 05:17 AM

Hi Pavithra,
I had a similar problem. Tranlations are getting loaded for all other titles and buttons inside my application but not for headerText of ejs-grid.  Please help me. This is my environments:
-------------------------------
Angular CLI: 9.0.6
Node: 12.16.1
OS: win32 x64

Angular: 9.0.6
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect                 0.900.6
@angular-devkit/build-angular          0.900.6
@angular-devkit/build-optimizer        0.900.6
@angular-devkit/build-webpack         0.900.6
@angular-devkit/core                          9.0.6
@angular-devkit/schematics               9.0.6
@angular/http                                     5.2.11
@ngtools/webpack                             9.0.6
@schematics/angular                        9.0.6
@schematics/update                        0.900.6
rxjs                                                    6.5.4
typescript                                          3.7.5
webpack                                          4.41.2




GR Gokul Ramalingam Syncfusion Team March 25, 2020 10:29 PM

Hi Luu, 

We have logged this reported issue as a feature and it will be included in our upcoming Essential Studio Volume 1, SP1 release.  

You can track this through the below feedback link. 


Please let us know if you have any concern. 

Regards, 
Gokul R 



JO Johannes April 6, 2021 08:45 AM

Hey,

we currently have this issue in Angular 11. Any idea?


RR Rajapandi Ravi Syncfusion Team April 7, 2021 06:48 AM

Hi Johannes, 

Based on your query we have prepared a sample with Angular 11 and try to reproduce your reported problem but the ngx-translate pipe in headertext was working fine from our end. Please refer the below sample for more information. 


If you still face the issue, Please share any issue reproducible sample or try to reproduce the issue with our above attached sample. 

Regards, 
Rajapandi R 


Loader.
Live Chat Icon For mobile
Up arrow icon