You can format the number, date, and time values for each field using formatSettings
option under dataSourceSettings
. It can be configured through code behind, during initial rendering.
For numbers, the formatting settings required to apply through code behind are:
name
: It allows to set the field name.format
: It allows to set the format of the respective field.Also, you can customize the applied number format by setting the
NumberFormatOptions
options informatSettings
itself.
import { Component, OnInit } from '@angular/core';
import { IDataOptions } from '@syncfusion/ej2-angular-pivotview';
import { Pivot_Data } from './datasource.ts';
@Component({
selector: 'app-container',
// specifies the template string for the pivot table component
template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings width=width></ejs-pivotview>`
})
export class AppComponent implements OnInit {
public dataSourceSettings: IDataOptions;
public width: string;
ngOnInit(): void {
this.width = '100%';
this.dataSourceSettings = {
dataSource: Pivot_Data,
expandAll: false,
drilledMembers: [{ name: 'Country', items: ['France'] }],
formatSettings: [{ name: 'Amount', format: 'C2', useGrouping: false,
minimumSignificantDigits: 1, maximumSignificantDigits: 3 }],
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
filters: []
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
PivotViewAllModule,
PivotFieldListAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
For date and time, the formatting settings required to apply through code behind are:
name
: It allows to set the field name.format
: It allows to set the format of the respective field.type
: It allows to set the type of format to be used for the respective field.Also, you can customize the applied date format by setting
DateFormatOptions
options informatSettings
itself.
import { Component, OnInit } from '@angular/core';
import { IDataOptions } from '@syncfusion/ej2-angular-pivotview';
import { Pivot_Data } from './datasource.ts';
@Component({
selector: 'app-container',
// specifies the template string for the pivot table component
template: `<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings width=width></ejs-pivotview>`
})
export class AppComponent implements OnInit {
public dataSourceSettings: IDataOptions;
public width: string;
ngOnInit(): void {
this.width = '100%';
this.dataSourceSettings = {
dataSource: Pivot_Data,
expandAll: false,
drilledMembers: [{ name: 'Country', items: ['France'] }],
formatSettings: [{ name: 'Year', format: 'dd/MM/yyyy-hh:mm', type: 'date' }],
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
filters: []
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
PivotViewAllModule,
PivotFieldListAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
As per Firefox and Edge browsers standards, most of the date and time formats used in data source aren’t supported. For example: Apr-2000, Apr-01-2000, 01-03-2000, 2000-Apr-01 etc… are not supported. Meanwhile ISO formats
will be supported across all browsers.