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

[shweta]

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>

[Pavithra Subramaniyam]

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,  

https://github.com/ngx-translate/core  

  

Please refer the below sample,  

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ngxTranslate-1276914667  

  

If you have further queries, please get back to us.  

 

Regards, 

Pavithra S. 

[shweta]

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. 

[Pavithra Subramaniyam]

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: 

 

Sample: https://www.syncfusion.com/downloads/support/forum/147740/ze/translateapp-147740301119617 

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. 

[shweta]

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.

[Pavithra Subramaniyam]

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. 

[Luu Duc Cuong]

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

[Gokul Ramalingam]

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. 

Feedback: https://www.syncfusion.com/feedback/12966/ 

Please let us know if you have any concern. 

Regards, 

Gokul R 

[Johannes]

Hey,

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

[Rajapandi Ravi]

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. 

Sample: https://www.syncfusion.com/downloads/support/forum/147740/ze/1477402130265077.zip 

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