Grid localization and setting own text while no records to display

[Unknown]

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]

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, 

https://help.syncfusion.com/angular/grid/columns#column-template 

https://help.syncfusion.com/api/angular/ejgrid#events:templaterefresh 

 

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, 

https://help.syncfusion.com/api/angular/ejgrid#events:databound 

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]

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]

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]

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]

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. 

Sample: https://stackblitz.com/edit/angular-9ay52r-pkqsjr?file=app.component.ts 

Regards, 

Thavasianand S. 

[Kenana Reda]

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]

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 }, 

    ] 

  } 

} 

Sample link: https://stackblitz.com/edit/github-lushmu-vspm19?file=src/app/app.component.ts 

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

Regards, 

Thavasianand S.