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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid localization and setting own text while no records to display

Thread ID:

Created:

Updated:

Platform:

Replies:

145545 Mar 1,2018 01:40 PM UTC Jul 10,2019 12:20 PM UTC Angular - EJ 2 7
loading
Tags: Grid
Unknown
Asked On March 1, 2018 01:40 PM UTC

Hello,

1. is there a possibility to get number/currency/date formats in grid by locale?

I tried to set grid locale to 'ar-AE', 'de-DE', 'lt-LT', but my date format is always the same . I am getting date from WebAPI like . I am also tried to set it like '2013-05-16', but the format in grid is always the same. My column looks like this: 


2. Is there a possibility to set my own text to display when there are no records to display in grid?

Instead of this  I want to set my text (I do not want to use globalization with texts, using syncfusion-ej-global)

Renjith Singh Rajendran [Syncfusion]
Replied On March 2, 2018 01:03 PM UTC

Hi Customer, 

Thanks for contacting Syncfusion support. 

Query 1 : Is there a possibility to get number/currency/date formats in grid by locale? 
We have achieved this requirement by using the column template support of Grid. We have made the date column as a template. And in the “templateRefresh” event of grid, we have converted the date values based on the corresponding language provided. Please refer the code example below, 

[app.component.html] 
 
<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" (templateRefresh)="onTemplateRefresh($event)"> 
    <e-columns> 
        ... 
       <e-column field= "OrderDate" headerText="Photo"> 
            <ng-template e-template let-data> 
                <div>{{data.OrderDate}}</div> 
            </ng-template> 
         </e-column> 
    </e-columns> 
</ej-grid> 
 
[app.component.ts] 
 
onTemplateRefresh(args:any){ 
    var objDate = args.data.OrderDate; 
    var newdate  = objDate.toLocaleString('ar-AE', { timeZone: 'UTC' }); 
    args.cell.innerHTML = newdate; 
} 

Please refer the documentation link below, 
 
Query 2 : Is there a possibility to set my own text to display when there are no records to display in grid? 
We suggest you to use the dataBound event of Grid, to set your own text when the grid is empty. Please refer the documentation link below, 

Please refer the code example below, 

[app.component.html] 
 
<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" (dataBound)="databound($event)"> 
    ... 
</ej-grid> 
 
[app.component.ts] 
 
           databound(args:any){ 
                var obj = $(".e-grid").ejGrid("instance") 
                if(obj.getContentTable().find("td").hasClass("emptyrecord")) 
                { 
                    obj.getContentTable().find("td").text("Your text here...") 
                } 
            } 

Regards, 
Renjith Singh Rajendran. 


Kenana Reda
Replied On June 23, 2019 10:06 AM UTC

Hi there! 
I'm trying to change text when no record to display but couldn't do that with your solution, I tried 
@ViewChild('grid') public grid: GridComponent;
this.grid.getContentTable().find // An error find doesn't exist on type element

How Could I change the text in Angular ? 

Best, 
Kenana

Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On June 24, 2019 04:28 PM UTC

Hi Kenana, 

Thanks for contacting Syncfusion Support. 

We have checked your query and prepared sample as per your given code example but we are unable to reproduce your reported problem at our end. Share us the following details. 

  1. Have you get the grid instance on this.grid. If so, please share us the screenshot.
  2. Share us complete Grid code example(both html and ts file).
  3. StackTrace of the issue.

Regards, 

Farveen sulthana T 
 


Kenana Reda
Replied On June 26, 2019 12:02 PM UTC

Hi!
I get Grid instance using this.grid but don't know How to complete, even using getContentTable is npt a solution
here is ts file 
constructor() { }
public pageSettings: PageSettingsModel;
public filterOptions: FilterSettingsModel;
@Input()
public Workpositions: WorkPosition[];
@ViewChild('grid') public grid: GridComponent;
ngOnInit() {
// Grid features
this.pageSettings = { pageSize: 10 };
this.filterOptions = {
type: "Menu"
};
console.log(this.grid);
}

}



.html file
<div>
<ejs-grid #grid [dataSource]='Workpositions' [allowPaging]="true" [pageSettings]='pageSettings' [allowTextWrap]='true'
[allowSorting]="true" [allowFiltering]="true" [filterSettings]='filterOptions' [toolbar]='toolbarOptions'>
<e-columns>
<e-column field='name' headerText="{{ 'WorkPosition.Name' | translate }}" textAlign='Center' width=120>
</e-column>
<e-column headerText="{{ 'WorkPosition.Date' | translate }}" textAlign='Center' width=100>
<ng-template #template let-Workpositions>
<span class="date"> {{Workpositions.date_de}}</span>
<i class="fas fa-exclamation"></i>
</ng-template>
</e-column>
<e-column headerText="{{ 'WorkPosition.Type' | translate }}" textAlign='Center' width=120>
<ng-template #template let-Workpositions>
<div [ngSwitch]="Workpositions.commodity_type">
<span *ngSwitchCase='null'> frei </span>
<span *ngSwitchCase='1'> Pflanze </span>
<span *ngSwitchCase='2'> Dienstleistung </span>
<span *ngSwitchCase='3'> Produkt </span>
</div>
</ng-template>
</e-column>
<e-column field='servicegroup_name' headerText="{{ 'WorkPosition.Service_group' | translate }}" textAlign='Center'
width=120></e-column>
<e-column field='number' headerText="{{ 'WorkPosition.Number' | translate }}" textAlign='Center' width=80>
</e-column>
<e-column headerText="{{ 'WorkPosition.Status' | translate }}" textAlign='Center' width=90>
<ng-template #template let-Workpositions>
<button class="btn btn-sm m-auto" [ngClass]="{
'btn-outline-success': Workpositions.isDone,
'btn-outline-danger': !Workpositions.isDone
}">
<i class="fas" [ngClass]="{
'fa-check': Workpositions.isDone,
'fa-times': !Workpositions.isDone
}"></i>
</button>
</ng-template>
</e-column>
</e-columns>
</ejs-grid>
</div>

Best, 
Kenana

Thavasianand Sankaranarayanan [Syncfusion]
Replied On June 27, 2019 10:13 AM UTC

Hi Kenana, 

Based on your query we suspect that you want to change the text when empty records bind in Grid. We can achieve your requirement by using the below code example. 

[app.component.ts] 

setCulture('en-US'); 

L10n.load({ 
    'en-US': { 
        grid: { 
           EmptyRecord:"Empty records in Grid", 
       
   
}); 

  
We have prepared a simple sample in the following stackblitz link. 


Regards, 
Thavasianand S. 


Kenana Reda
Replied On July 9, 2019 11:43 AM UTC

Hi there!
It's working on any sample when trying but not on my machine, I did the required changes but couldn't get it work!
and I'm using `@ngx-translate/core`
Does the compatible with each other? What should I consider to get it work? I followed documentation but still stuck with it

Thavasianand Sankaranarayanan [Syncfusion]
Replied On July 10, 2019 12:20 PM UTC

Hi Kenana, 

As per your query, we have created a sample with ’ngx-translate’ in the EJ2 Grid in angular platform. if you need to apply the locale “No records to display” in the Grid using our previous update. Please refer the below code example and sample for more information.  

[app.component.ts] 
 
import { Component, ViewChild, ChangeDetectorRef, OnInit } from '@angular/core'; 
import { TranslateService } from '@ngx-translate/core'; 
import { GridComponent } from '@syncfusion/ej2-ng-grids'; 
 
@Component({ 
  selector: 'app-root', 
  template: ` 
  <div> 
      <h2>{{ 'HOME.TITLE' | translate }}</h2> 
      <label> 
        {{ 'HOME.SELECT' | translate }} 
        <select #langSelect (change)="translate.use(langSelect.value)"> 
          <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option> 
        </select> 
      </label> 
    </div> 
   <div *ngIf='loaded'> 
    <ejs-grid #grid [dataSource] = 'data' [columns]='columns'> 
    </ejs-grid> 
    </div> 
  `, 
}) 
export class AppComponent implements OnInit { 
  private changeDetector: ChangeDetectorRef; 
  public isParentLoaded: Boolean = false; 
  public isChildLoaded: Boolean = false; 
  .    .   .   .   
  public loaded = false; 
  public gender; 
  public oldLang: string = ''; 
  @ViewChild('grid') 
  public grid: GridComponent; 
  @ViewChild('childgrid') 
  public chGrid: GridComponent; 
  public columns; 
  constructor(public translate: TranslateService) { 
    translate.addLangs(['en', 'fr']); 
    translate.setDefaultLang('en'); 
    translate.onLangChange.subscribe((event: any) => { 
      this.gender = this.translate.instant('HOME.Male'); 
      if (this.oldLang !== '' && this.oldLang !== event.lang) { 
        this.loaded = false; 
        this.oldLang = event.lang; 
        setTimeout(() => { 
          this.loaded = true; // template re render process 
        }, 0); 
 
      } 
      else { 
        this.loaded = true; 
        this.oldLang = event.lang; 
      } 
    }); 
    const browserLang = translate.getBrowserLang(); 
    translate.use('en'); 
  } 
  ngOnInit() { 
    this.columns = [{ 
      headerText: 'Gender', textAlign: 'Center', 
      template: '<div>HOME.${Gender}</div>', width: 180 
    }, 
    { field: 'CustomerID', headerText: 'Name', width: 120 }, 
    ] 
  } 
} 


Please get back to us, if you need further assistance. 

Regards, 
Thavasianand S. 


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