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
<ej-pivotschemadesigner ></ej-pivotschemadesigner>
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:
<ej-pivotschemadesigner cssClass="gradient-lime">
</ej-pivotschemadesigner>
export class AppComponent {
//..
}
customObject object
Object utilized to pass additional information between client-end and service-end.
Default Value: {}
Example:
<ej-pivotschemadesigner [customObject]="customObject">
</ej-pivotschemadesigner>
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:
<ej-pivotschemadesigner [enableWrapper]="true">
</ej-pivotschemadesigner>
export class AppComponent {
//..
}
enableRTL boolean
Allows the user to view PivotTable Field List from right to left.
Default Value: false
Example:
<ej-pivotschemadesigner [enableRTL]="true">
</ej-pivotschemadesigner>
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:
<ej-pivotschemadesigner [olap]="olap">
</ej-pivotschemadesigner>
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:
<ej-pivotschemadesigner [olap.showKPI]="true">
</ej-pivotschemadesigner>
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:
<ej-pivotschemadesigner [olap.showNamedSets]="true">
</ej-pivotschemadesigner>
export class AppComponent {
//..
}
enableDragDrop boolean
Allows the user to enable/disable drag and drop operations within the PivotTable Field List.
Default Value: true
Example:
<ej-pivotschemadesigner [enableDragDrop]="false">
</ej-pivotschemadesigner>
export class AppComponent {
//..
}
height string
Sets the height for PivotSchemaDesigner.
Default Value: “”
Example:
<ej-pivotschemadesigner [height]="630px">
</ej-pivotschemadesigner>
export class AppComponent {
//..
}
locale string
Allows the user to set the localized language for the widget.
Default Value: “en-US”
Example:
<ej-pivotschemadesigner [locale]="en-US">
</ej-pivotschemadesigner>
export class AppComponent {
//..
}
pivotControl object
Sets the Pivot control bound with this PivotSchemaDesigner.
Default Value: null
Example:
<ej-pivotschemadesigner [pivotControl]="pivotControl">
</ej-pivotschemadesigner>
export class AppComponent {
public pivotControl;
constructor()
{
this.pivotControl = controlObject;
}
}
width string
Sets the width for PivotSchemaDesigner.
Default Value: “”
Example:
<ej-pivotschemadesigner width="415px">
</ej-pivotschemadesigner>
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:
<ej-pivotschemadesigner [layout]="layout">
</ej-pivotschemadesigner>
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:
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:
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:
<ej-pivotschemadesigner (load)="load($event)">
</ej-pivotschemadesigner>
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:
<ej-pivotschemadesigner (dragMove)="dragMove($event)">
</ej-pivotschemadesigner>
export class AppComponent {
dragMove(args){
//Enter your code here.
}
}