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.
. 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: 
I want to set my text (I do not want to use globalization with texts, using syncfusion-ej-global)|
[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;
} |
|
[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...")
}
} |
|
[app.component.ts]
setCulture('en-US');
L10n.load({
'en-US': {
grid: {
EmptyRecord:"Empty records in Grid",
}
}
});
|
|
[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 },
]
}
} |
