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) {}
        });