PivotSchemaDesigner

2 May 20189 minutes to read

PivotSchemaDesigner, also known as PivotTable Field List, is automatically populated with fields from the bound datasource and allows end user to drag fields, filter them, and create pivot views at run-time.

Example

HTML

<ej-pivotschemadesigner ></ej-pivotschemadesigner>

TS

export class AppComponent {
  //..
 }

Requires

• module:jQuery-3.0.0.min.js
• module:ej.core.js
• module:ej.data.js
• module:ej.touch.js
• module:ej.dialog.js
• module:ej.draggable.js
• module:ej.pivot.common.js
• module:ej.pivotschemadesigner.js

Members

cssClass string

Specifies the CSS class to PivotSchemaDesigner to achieve custom theme.

Default Value: “”

Example:

HTML

<ej-pivotschemadesigner cssClass="gradient-lime">
</ej-pivotschemadesigner>

TS

export class AppComponent {
  //..
 }

customObject object

Object utilized to pass additional information between client-end and service-end.

Default Value: {}

Example:

HTML

<ej-pivotschemadesigner [customObject]="customObject">
</ej-pivotschemadesigner>

TS

export class AppComponent {
    
    public  customObject;

        constructor()
        {
          this.customObject = { Language: "en-US" }; 
        }
 }

enableWrapper boolean

For ASP.NET and MVC Wrapper, PivotSchemaDesigner will be initialized and rendered empty initially. Once the connected pivot control widget is rendered completely, PivotSchemaDesigner will just be populated with data source by setting this property to “true”.

Default Value: false

Example:

HTML

<ej-pivotschemadesigner [enableWrapper]="true">
</ej-pivotschemadesigner>

TS

export class AppComponent {
    //..
 }

enableRTL boolean

Allows the user to view PivotTable Field List from right to left.

Default Value: false

Example:

HTML

<ej-pivotschemadesigner [enableRTL]="true">
</ej-pivotschemadesigner>

TS

export class AppComponent {
    //..
 }

olap object

Sets the visibility of OLAP elements in PivotTable Field List. This is only applicable for OLAP datasource.

Default Value: null

Example:

HTML

<ej-pivotschemadesigner [olap]="olap">
</ej-pivotschemadesigner>

TS

export class AppComponent {
    
    public  olap;

        constructor()
        {
          this.olap = olapSettings; 
        }
 }

olap.showKPI boolean

Allows the user to view the KPI elements in tree-view inside PivotTable Field List. This is only applicable for OLAP datasource.

Default Value: false

Example:

HTML

<ej-pivotschemadesigner [olap.showKPI]="true">
</ej-pivotschemadesigner>

TS

export class AppComponent {
    //..
 }

olap.showNamedSets boolean

Allows the user to view the named sets in tree-view inside PivotTable Field List. This is only applicable for OLAP datasource.

Default Value: false

Example:

HTML

<ej-pivotschemadesigner [olap.showNamedSets]="true">
</ej-pivotschemadesigner>

TS

export class AppComponent {
    //..
 }

enableDragDrop boolean

Allows the user to enable/disable drag and drop operations within the PivotTable Field List.

Default Value: true

Example:

HTML

<ej-pivotschemadesigner [enableDragDrop]="false">
</ej-pivotschemadesigner>

TS

export class AppComponent {
    //..
 }

height string

Sets the height for PivotSchemaDesigner.

Default Value: “”

Example:

HTML

<ej-pivotschemadesigner [height]="630px">
</ej-pivotschemadesigner>

TS

export class AppComponent {
    //..
 }

locale string

Allows the user to set the localized language for the widget.

Default Value: “en-US”

Example:

HTML

<ej-pivotschemadesigner [locale]="en-US">
</ej-pivotschemadesigner>

TS

export class AppComponent {
    //..
 }

pivotControl object

Sets the Pivot control bound with this PivotSchemaDesigner.

Default Value: null

Example:

HTML

<ej-pivotschemadesigner [pivotControl]="pivotControl">
</ej-pivotschemadesigner>

TS

export class AppComponent {
    
    public  pivotControl;

        constructor()
        {
          this.pivotControl = controlObject; 
        }
 }

width string

Sets the width for PivotSchemaDesigner.

Default Value: “”

Example:

HTML

<ej-pivotschemadesigner width="415px">
</ej-pivotschemadesigner>

TS

export class AppComponent {
    //..
 }

layout enum

Sets the layout for PivotSchemaDesigner.

Default Value: ej.PivotSchemaDesigner.Layouts.Excel

Name	Description
Excel	To set the layout as same in the Excel.
Normal	To set normal layout for Field List.
OneByOne	To set layout with the axes one above the other.

Example:

HTML

<ej-pivotschemadesigner [layout]="layout">
</ej-pivotschemadesigner>

TS

export class AppComponent {
    
    public  layout;

        constructor()
        {
          this.layout = ej.PivotSchemaDesigner.Layouts.Normal; 
        }
 }

Methods

refreshControl()

Re-renders the control with the data source bound to the pivot control at that instant.

Example:

TS

export class AppComponent {
    
  ngAfterViewInit(){

     let schemaObj = $(".e-pivotschemadesigner").data("ejPivotSchemaDesigner");
     schemaObj.refreshControl();
  }
 }

destroy()

This function Destroy the PivotSchemaDesigner widget all events bound using this._on will be unbind automatically and bring the control to pre-init state.

Example:

TS

export class AppComponent {
    
  ngAfterViewInit(){

     let schemaObj = $(".e-pivotschemadesigner").data("ejPivotSchemaDesigner");
     schemaObj.destroy();
  }
 }

Events

load

Triggers when PivotSchemaDesigner loading is initiated.

Event Parameters
Name	Type	Description
element	object	returns the HTML element of PivotSchemaDesigner control.

Example:

HTML

<ej-pivotschemadesigner (load)="load($event)">
</ej-pivotschemadesigner>

TS

export class AppComponent {

    load(args){
         //Enter your code here.
    }
 }

dragMove

Triggers when we start dragging any field from PivotSchemaDesigner.

Event Parameters
Name	Type	Description
dragTarget	object	returns the HTML element of the dragged field from PivotSchemaDesigner.
draggedElementData	object	return the JSON details of the dragged field.
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the PivotSchemaDesigner model

Example:

HTML

<ej-pivotschemadesigner (dragMove)="dragMove($event)">
</ej-pivotschemadesigner>

TS

export class AppComponent {

    dragMove(args){
         //Enter your code here.
    }
 }