Search results

Defer Layout Update

Defer layout update support allows you to update the pivot table only on demand. To enable deferred updates in the pivot grid, set the property allowDeferLayoutUpdate as true.

Built-in Field List (Pop-up)

Source
Preview
index.tsx
index.jsx
import { FieldList, IDataOptions, IDataSet, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';

class App extends React.Component<{}, {}>{

  public dataSource: IDataOptions = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    data: pivotData as IDataSet[],
    expandAll: false,
    allowLabelFilter: true,
    allowValueFilter: true,
    filters: [],
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
  }
  public pivotGridObj: PivotViewComponent;
  render() {
    return <PivotViewComponent  ref={d => this.pivotGridObj = d!} id='PivotView' height={280} dataSource={this.dataSource} showFieldList={true} allowDeferLayoutUpdate={true}><Inject services={[FieldList]} /></PivotViewComponent>
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));
import { FieldList, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.dataSource = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            data: pivotData,
            expandAll: false,
            allowLabelFilter: true,
            allowValueFilter: true,
            filters: [],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
        };
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotGridObj = d} id='PivotView' height={280} dataSource={this.dataSource} showFieldList={true} allowDeferLayoutUpdate={true}><Inject services={[FieldList]}/></PivotViewComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));

Stand-alone Field List (Fixed)

{% raw %}

import { CalculatedField, PivotFieldListComponent, IDataOptions, IDataSet, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';

class App extends React.Component<{}, {}>{

  public dataSource: IDataOptions = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    data: pivotData as IDataSet[],
    expandAll: false,
    filters: [],
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
  }
  public pivotGridObj: PivotViewComponent;
  public fieldlistObj: PivotFieldListComponent;
  render() {
    return <div className="control-section">
    <PivotViewComponent id='PivotViewFieldList' ref={d => this.pivotGridObj = d!} enginePopulated={this.afterPivotPopulate.bind(this)} allowDeferLayoutUpdate={true} width={'99%'} height={'530'} gridSettings={{columnWidth: 140}}>
    </PivotViewComponent>
    <PivotFieldListComponent id='PivotFieldList' ref={d => this.fieldlistObj = d!} enginePopulated={this.afterPopulate.bind(this)} dataSource={this.dataSource} renderMode={"Fixed"} allowDeferLayoutUpdate={true} allowCalculatedField={true}>
        <Inject services={[CalculatedField]} />
    </PivotFieldListComponent></div>
  }

  componentDidMount(): void {
    this.fieldlistObj.updateView(this.pivotGridObj);
  }

  afterPopulate(): void {
    if (this.fieldlistObj.isRequiredUpdate) {
            this.fieldlistObj.updateView(this.pivotGridObj);
      }
      this.pivotGridObj.notify('ui-update', this.pivotGridObj);
      this.fieldlistObj.notify('tree-view-update', this.fieldlistObj);
  }
  afterPivotPopulate(): void {
      if (this.fieldlistObj && this.pivotGridObj) {
          this.fieldlistObj.update(this.pivotGridObj);
      }
  }
  rendereComplete(): void {
      this.fieldlistObj.updateView(this.pivotGridObj);
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));

{% endraw %}