PivotSchemaDesigner

29 May 20199 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.

Syntax

JAVASCRIPT

$(element).ejPivotSchemaDesigner()

Example

HTML

<div id="PivotSchemaDesigner1"> </div> 
    
    <script>
        // Create PivotSchemaDesigner
        $("#PivotSchemaDesigner1").ejPivotSchemaDesigner(...);   
    </script>

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:

JAVASCRIPT

$("#PivotSchemaDesigner1").ejPivotSchemaDesigner({ cssClass: "gradient-lime" });

customObject object

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

Default Value: {}

Example:

JAVASCRIPT

$("#PivotSchemaDesigner1").ejPivotSchemaDesigner({ customObject: { "MyObject": "Hi Syncfusion!!" } });

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:

JAVASCRIPT

$("#PivotSchemaDesigner1").ejPivotSchemaDesigner({ enableWrapper : true });

enableRTL boolean

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

Default Value: false

Example:

JAVASCRIPT

$("#PivotSchemaDesigner1").ejPivotSchemaDesigner({ enableRTL : true });

olap object

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

Default Value: null

Example:

JAVASCRIPT

$("#PivotSchemaDesigner1").ejPivotSchemaDesigner({ 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:

JAVASCRIPT

$("#PivotSchemaDesigner1").ejPivotSchemaDesigner({ olap: { showKpi : true } });

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:

JAVASCRIPT

$("#PivotSchemaDesigner1").ejPivotSchemaDesigner({ olap: { showNamedSets : true } });

enableDragDrop boolean

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

Default Value: true

Example:

JAVASCRIPT

$("#PivotSchemaDesigner1").ejPivotSchemaDesigner({ enableDragDrop : true });

height string

Sets the height for PivotSchemaDesigner.

Default Value: “”

Example:

JAVASCRIPT

$("#PivotSchemaDesigner1").ejPivotSchemaDesigner({ height: "630px" });

locale string

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

Default Value: “en-US”

Example:

JAVASCRIPT

$("#PivotSchemaDesigner1").ejPivotSchemaDesigner({ locale: "en-US" });

pivotControl object

Sets the Pivot control bound with this PivotSchemaDesigner.

Default Value: null

Example:

JAVASCRIPT

$("#PivotSchemaDesigner1").ejPivotSchemaDesigner({ pivotControl: controlObject });

serviceMethods object

Allows the user to set custom name for the methods at service-end, communicated during AJAX post.

Default Value: {}

Example:

JAVASCRIPT

$("#PivotSchemaDesigner1").ejPivotSchemaDesigner({ serviceMethods: { initialize: "InitializeGrid"} });

serviceMethod.fetchMembers string

Allows the user to set the custom name for the service method responsible for getting the values for the tree-view inside filter dialog.

Default Value: “FetchMembers”

Example:

JAVASCRIPT

$("#PivotSchemaDesigner1").ejPivotSchemaDesigner({ serviceMethod: { fetchMembers: "FetchMembersMethod" } });

serviceMethod.filtering string

Allows the user to set the custom name for the service method responsible for filtering operation in Field List.

Default Value: “Filtering”

Example:

JAVASCRIPT

$("#PivotSchemaDesigner1").ejPivotSchemaDesigner({ serviceMethod: { filtering : "FilteringMethod" } });

serviceMethod.memberExpand string

Allows the user to set the custom name for the service method responsible for the server-side action, on expanding members in Field List.

Default Value: “MemberExpanded”

Example:

JAVASCRIPT

$("#PivotSchemaDesigner1").ejPivotSchemaDesigner({ serviceMethod: { memberExpand: "MemberExpandedMethod" } });

serviceMethod.nodeDropped string

Allows the user to set the custom name for the service method responsible for the server-side action, on dropping a node into Field List.

Default Value: “NodeDropped”

Example:

JAVASCRIPT

$("#PivotSchemaDesigner1").ejPivotSchemaDesigner({ serviceMethod: { nodeDropped: "nodedroppedMethod" } });

serviceMethod.nodeStateModified string

Allows the user to set the custom name for the service method responsible for the server-side action on changing the checked state of a node in Field List.

Default Value: “NodeStateModified”

Example:

JAVASCRIPT

$("#PivotSchemaDesigner1").ejPivotSchemaDesigner({ serviceMethod: { nodeStateModified: "NodeStateModifiedMethod" } });

serviceMethod.removeButton string

Allows the user to set the custom name for the service method responsible for button removing operation in Field List.

Default Value: “RemoveButton”

Example:

JAVASCRIPT

$("#PivotSchemaDesigner1").ejPivotSchemaDesigner({ serviceMethod: { removeButton: "RemoveButtonMethod" } });

url string

Connects the service using the specified URL for any server updates.

Default Value: “”

Example:

JAVASCRIPT

$("#PivotSchemaDesigner1").ejPivotSchemaDesigner({ url: "/wcf/PivotService.svc" });

width string

Sets the width for PivotSchemaDesigner.

Default Value: “”

Example:

JAVASCRIPT

$("#PivotSchemaDesigner1").ejPivotSchemaDesigner({ width: "415px" });

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:

JAVASCRIPT

$("#PivotSchemaDesigner1").ejPivotSchemaDesigner({ layout: ej.PivotSchemaDesigner.Layouts.Normal });

Methods

doAjaxPost()

Performs an asynchronous HTTP (AJAX) request.

Example:

JAVASCRIPT

var schemaObj = $("#PivotSchemaDesigner1").data("ejPivotSchemaDesigner");
    schemaObj.doAjaxPost("POST", "/PivotGridService.svc/Initialize", {"key", "Hello World"}, successEvent, null);

refreshControl()

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

Example:

JAVASCRIPT

var schemaObj = $("#PivotSchemaDesigner1").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:

JAVASCRIPT

var schemaObj = $("#PivotSchemaDesigner1").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:

JAVASCRIPT

$("#PivotSchemaDesigner1").$("#PivotSchemaDesigner1")({
        load: function (args) {}
    });

afterServiceInvoke

Triggers when it reaches client-side after any AJAX request.

Event Parameters
Name	Type	Description
action	string	returns the current action of PivotSchemaDesigner control.
customObject	object	returns the custom object bound with PivotSchemaDesigner control.
element	object	returns the HTML element of PivotSchemaDesigner control.

Example:

JAVASCRIPT

$("#PivotSchemaDesigner1").$("#PivotSchemaDesigner1")({
        afterServiceInvoke: function (args) {}
    });

beforeServiceInvoke

Triggers before any AJAX request is passed from PivotSchemaDesigner to service methods.

Event Parameters
Name	Type	Description
action	string	returns the current action of PivotSchemaDesigner control.
customObject	object	returns the custom object bound with PivotSchemaDesigner control.
element	object	returns the HTML element of PivotSchemaDesigner control.

Example:

JAVASCRIPT

$("#PivotSchemaDesigner1").$("#PivotSchemaDesigner1")({
        beforeServiceInvoke: function (args) {}
    });

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:

JAVASCRIPT

$("#PivotSchemaDesigner1").$("#PivotSchemaDesigner1")({
        dragMove: function (args) {}
    });