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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

147740 Sep 20,2019 09:24 AM UTC Apr 7,2021 11:48 AM UTC Angular - EJ 2 9
loading
Tags: Grid
shweta
Asked On September 20, 2019 09:24 AM UTC

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 [Syncfusion]
Replied On September 23, 2019 10:15 AM UTC

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. 


shweta
Replied On September 24, 2019 01:22 PM UTC

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 [Syncfusion]
Replied On September 25, 2019 09:05 AM UTC

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. 


shweta
Replied On September 27, 2019 02:54 PM UTC

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 [Syncfusion]
Replied On September 30, 2019 08:20 AM UTC

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
Replied On March 13, 2020 10:17 AM UTC

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 [Syncfusion]
Replied On March 26, 2020 03:29 AM UTC

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 


Johannes
Replied On April 6, 2021 01:45 PM UTC

Hey,

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

Rajapandi Ravi [Syncfusion]
Replied On April 7, 2021 11:48 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon