Refresh the field list in Angular Pivotview component
15 Nov 20226 minutes to read
You can refresh pivot table and field list with new data source dynamically.
import { Component, OnInit, ViewChild } from '@angular/core';
import { PivotViewComponent, IDataOptions, FieldListService, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
@Component({
selector: 'app-container',
providers: [FieldListService],
// specifies the template string for the pivot table component
template: `<div class="col-md-8"><ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings showFieldList="true" width=width></ejs-pivotview></div><div class="col-md-2"><button ej-button id='refresh'>Refresh</button></div>`
})
export class AppComponent implements OnInit {
public pivotData: IDataSet[];
public dataSourceSettings: IDataOptions;
public button: Button;
public width: string;
@ViewChild('pivotview',{static: false})
public pivotGridObj: PivotViewComponent;
ngOnInit(): void {
this.pivotData = [
{ 'Sold': 31, 'Amount': 52824, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },
{ 'Sold': 51, 'Amount': 86904, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },
{ 'Sold': 90, 'Amount': 153360, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },
{ 'Sold': 25, 'Amount': 42600, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },
{ 'Sold': 27, 'Amount': 46008, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' }];
this.dataSourceSettings = {
dataSource: this.pivotData,
expandAll: false,
columns: [{ name: 'Year', caption: 'Production Year' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
rows: [{ name: 'Country' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: []
};
this.width = '100%';
this.button = new Button({ isPrimary: true });
this.button.appendTo('#refresh');
this.button.element.onclick = (): void => {
this.pivotGridObj.engineModule.fieldList = {};
this.pivotGridObj.dataSourceSettings.dataSource = [
{ 'Sold': 31, 'Amount': 52824, 'Country': 'France', 'Year': 'FY 2015' },
{ 'Sold': 51, 'Amount': 86904, 'Country': 'France', 'Year': 'FY 2015' },
{ 'Sold': 90, 'Amount': 153360, 'Country': 'France', 'Year': 'FY 2015' },
{ 'Sold': 25, 'Amount': 42600, 'Country': 'France', 'Year': 'FY 2015' },
{ 'Sold': 27, 'Amount': 46008, 'Country': 'France', 'Year': 'FY 2016' }];
};
};
}
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);