Search results

Customize empty value cells

You can show the custom string in the empty value cells using the emptyCellsTextContent string type property in dataSource object of the pivot table. It can be configured through code behind during initial rendering.

Source
Preview
app.component.ts
app.module.ts
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 Grid component
  template: `<ejs-pivotview #pivotview id='PivotView' [dataSource]=dataSource width=width></ejs-pivotview>`
})
export class AppComponent implements OnInit {
    public dataSource: IDataOptions;
    public width: string;

    ngOnInit(): void {
        this.width = '100%';

        this.dataSource = {
            data: Pivot_Data,
            expandAll: false,
            emptyCellsTextContent: '*',
            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 { }