PivotSchemaDesigner

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.
        }
     }