PivotGrid

29 May 201924 minutes to read

The PivotGrid control is easily configurable, presentation-quality business control that reads OLAP data from a Microsoft SQL Server Analysis Services database, an offline cube, XML/A, or relational datasource.

Syntax

  • JAVASCRIPT
  • $(element).ejPivotGrid()

    Example

  • HTML
  • <div id="PivotGrid1"> </div> 
        
        <script>
            //Create PivotGrid
            $("#PivotGrid1").ejPivotGrid(...);       
        </script>

    Requires

    • module:jQuery-3.0.0.min.js
    • module:ej.core.js
    • module:ej.data.js
    • module:ej.touch.js
    • module:ej.waitingpopup.js
    • module:ej.pivot.common.js
    • module:ej.pivotanalysis.base.js
    • module:ej.olap.base.js
    • module:ej.pivotgrid.js
    • module:ej.pivotpager.js

    Members

    analysisMode enum

    Sets the mode for the PivotGrid widget to bind either OLAP or relational data source.

    Name Description
    OLAP To bind an OLAP data source to PivotGrid.
    Pivot To bind a relational data source to PivotGrid.

    Default Value: ej.Pivot.AnalysisMode.Pivot

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ analysisMode: ej.Pivot.AnalysisMode.Olap });

    cssClass string

    Specifies the CSS class to the PivotGrid for achieving the custom theme.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ cssClass: "gradient-lime" });

    pivotTableFieldListID string

    Connects the PivotSchemaDesigner with specified ID to the PivotGrid control.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ pivotTableFieldListID: "PivotTableFieldListID" });

    dataSource object

    Initializes the data source for the PivotGrid widget, when it functions completely on client-side.

    Default Value: {}

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid( { dataSource: { data: value } });

    dataSource.columns array

    Lists out the items to be arranged in the columns section of the PivotGrid.

    Default Value: []

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { columns: itemsArray } });

    dataSource.columns.fieldName string

    Allows you to bind the item by using its unique name as field name.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { columns: [{ fieldName : "MyFieldName" }] } });

    dataSource.columns.fieldCaption string

    Allows you to set the display caption for an item.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { columns: [{ fieldCaption : "MyFieldCaption" }] } });

    dataSource.columns.advancedFilter array

    Allows you to filter the report by using advanced filtering (e.g., Microsoft Excel) option for the OLAP data source in client-mode.

    Default Value: []

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { columns: [{ advancedFilter : itemArray }] } });

    dataSource.columns.advancedFilter.name string

    Allows you to provide a level unique name to perform the advanced filtering.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { columns: [{ advancedFilter : [{ name: "levelUniqueName" }] }] } });

    dataSource.columns.advancedFilter.labelFilterOperator string

    Allows you to set the operator to perform the label filtering.

    Default Value: “none”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { columns: [{ advancedFilter : [{ labelFilterOperator: ej.olap.LabelFilterOptions.EndsWith }] }] } });

    dataSource.columns.advancedFilter.valueFilterOperator string

    Allows you to set the operator to perform the value filtering.

    Default Value: “none”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { columns: [{ advancedFilter : [{ valueFilterOperator: ej.olap.ValueFilterOptions.Between }] }] } });

    dataSource.columns.advancedFilter.advancedFilterType string

    Allows you to set the filtering type while performing the advanced filtering.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { columns: [{ advancedFilter : [{ advancedFilterType:  ej.olap.AdvancedFilterType.LabelFilter }] }] } });

    dataSource.columns.advancedFilter.measure string

    In value filtering, this property contains the measure name to which the filter is applied.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { columns: [{ advancedFilter : [{ measure: "measureUniqueName", advancedFilterType: ej.olap.AdvancedFilterType.ValueFilter }] }] } });

    dataSource.columns.advancedFilter.values array

    Allows you to hold filter operand values in the advanced filtering.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • //For Label Filters
        $("#PivotGrid1").ejPivotGrid({ dataSource: { columns: [{ advancedFilter : [{ labelFilterOperator: ej.olap.LabelFilterOptions.EndsWith, values:  ["002"] }] }] } });
        
        //For Value Filters
        $("#PivotGrid1").ejPivotGrid({ dataSource: { columns: [{ advancedFilter : [{ valueFilterOperator: ej.olap.ValueFilterOptions.GreaterThan, values:  ["200"] }] }] } });

    dataSource.columns.isNamedSets boolean

    Allows you to indicate whether the added item is a named set or not.

    Note: This is only applicable for the OLAP datasource.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { columns: [{ fieldName: "[Core Product Group]", isNamedSets : true }] } });

    dataSource.columns.showSubTotal boolean

    Shows/hides the sub-total of the field in PivotGrid.

    Note: This is applicable only for the relational datasource.

    Default Value: true

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { columns: [{ fieldName: "Country", showSubTotal : false }] } });

    dataSource.columns.format string

    Allows you to set the format for column headers.

    Note: This is applicable only for the relational datasource.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { columns: [{ format : "date" }] } });

    dataSource.columns.formatString string

    This property is set to display the formatted values with format types in the PivotGrid.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { columns: [{ formatString : "MM/DD/YYYY" }] } });

    dataSource.columns.cssClass string

    Allows you to set the custom theme for column headers.

    Note: This is applicable only for the relational datasource.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { columns: [{ cssClass : "className" }] } });

    dataSource.columns.delimiter string

    Allows you to set the delimiter for date type format in the formatString. This is applicable for the groupByDate of row/column headers.

    Note: This is applicable only for the relational datasource with ClientMode.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { columns: [{ delimiter : "-" }] } });

    dataSource.columns.sortOrder enum

    Allows you to set the sorting order of members of the field.

    Note: This is applicable only for the relational datasource.

    Default Value: ej.PivotAnalysis.SortOrder.Ascending

    Name Description
    Ascending Sorts the members of the field in ascending order.
    Descending Sorts the members of the field in descending order.
    None Displays the members without sorting in default order.

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { columns: [{ fieldName: "Country", sortOrder: ej.PivotAnalysis.SortOrder.Descending }] } });

    dataSource.columns.drilledItems array

    Contains the list of members need to be drilled down by default in the field.

    Default Value: []

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { columns: [{ fieldName: "Country", drilledItems: ["Canada", "France"] }] } });

    dataSource.columns.filterItems object

    Applies the filter to field members.

    Default Value: null

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { columns: [{ fieldName: "Country", filterItems: { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }] } });

    dataSource.columns.filterItems.filterType enum

    Sets the type of filter to include/exclude the mentioned values.

    Note: This is applicable only for the relational datasource.

    Default Value: ej.PivotAnalysis.FilterType.Exclude

    Name Description
    Exclude Excludes the specified values among the members of the field.
    Include Includes the specified values alone among the members of the field.

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { columns: [{ fieldName: "Country", filterItems: { filterType: ej.PivotAnalysis.FilterType.Include, values: valueArray } }] } });

    dataSource.columns.filterItems.values array

    Contains the collection of items to be included/excluded among the field members.

    Default Value: []

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { columns: [{ fieldName: "Country", filterItems: { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }] } });

    dataSource.rows array

    Lists out the items to be arranged in the rows section of PivotGrid.

    Default Value: []

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { rows: itemsArray } });

    dataSource.rows.fieldName string

    Allows you to bind the item by using its unique name as field name.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { rows: [{ fieldName : "MyFieldName" }] } });

    dataSource.rows.fieldCaption string

    Allows you to set the display caption for the item.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { rows: [{ fieldCaption : "MyFieldCaption" }] } });

    dataSource.rows.advancedFilter array

    Allows you to filter the report by using the advanced filtering (e.g., Microsoft Excel) option for the OLAP data source in client-mode.

    Default Value: []

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { rows: [{ advancedFilter : itemArray }] } });

    dataSource.rows.advancedFilter.name string

    Allows you to provide the level unique name to perform the advanced filtering.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { rows: [{ advancedFilter : [{ name: "levelUniqueName" }] }] } });

    dataSource.rows.advancedFilter.labelFilterOperator string

    Allows you to set the operator to perform the label filtering.

    Default Value: “none”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { rows: [{ advancedFilter : [{ labelFilterOperator: ej.olap.LabelFilterOptions.EndsWith }] }] } });

    dataSource.rows.advancedFilter.valueFilterOperator string

    Allows you to set the operator to perform the value filtering.

    Default Value: “none”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { rows: [{ advancedFilter : [{ valueFilterOperator: ej.olap.ValueFilterOptions.Between }] }] } });

    dataSource.rows.advancedFilter.advancedFilterType string

    Allows you to set the filtering type while performing the advanced filtering.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { rows: [{ advancedFilter : [{ advancedFilterType:  ej.olap.AdvancedFilterType.LabelFilter }] }] } });

    dataSource.rows.advancedFilter.measure string

    In value filtering, this property contains the measure name to which the filter is applied.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { rows: [{ advancedFilter : [{ measure: "measureUniqueName", advancedFilterType: ej.olap.AdvancedFilterType.ValueFilter }] }] } });

    dataSource.rows.advancedFilter.values array

    Allows you to hold the filter operand values in the advanced filtering.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • //For Label Filters
        $("#PivotGrid1").ejPivotGrid({ dataSource: { rows: [{ advancedFilter : [{ labelFilterOperator: ej.olap.LabelFilterOptions.EndsWith, values:  ["002"] }] }] } });
        
        //For Value Filters
        $("#PivotGrid1").ejPivotGrid({ dataSource: { rows: [{ advancedFilter : [{ valueFilterOperator: ej.olap.ValueFilterOptions.GreaterThan, values:  ["200"] }] }] } });

    dataSource.rows.isNamedSets boolean

    Allows you to indicate whether the added item is a named set or not.

    Note: This is only applicable for the OLAP datasource.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { rows: [{ fieldName: "[Core Product Group]", isNamedSets : true }] } });

    dataSource.rows.showSubTotal boolean

    Shows/hides the sub-total of the field.

    Note: This is applicable only for the relational datasource.

    Default Value: true

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { rows: [{ fieldName: "Country", showSubTotal : false }] } });

    dataSource.rows.format string

    Allows you to set the format for row headers.

    Note: This is applicable only for the relational datasource.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { rows: [{ format : "date" }] } });

    dataSource.rows.formatString string

    This property is set to display the formatted values with format types in the PivotGrid.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { rows: [{ formatString : "MM/DD/YYYY" }] } });

    dataSource.rows.cssClass string

    Allows you to set the custom theme for row headers.

    Note: This is applicable only for the relational datasource.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { rows: [{ cssClass : "className" }] } });

    dataSource.rows.delimiter string

    Allows you to set the delimiter for date type format in the formatString. This is applicable for the groupByDate in row/column headers.

    Note: This is applicable only for the relational datasource with ClientMode.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { rows: [{ delimiter : "-" }] } });

    dataSource.rows.sortOrder enum

    Allows you to set the sorting order of members of the field.

    Note: This is applicable only for the relational datasource.

    Default Value: ej.PivotAnalysis.SortOrder.Ascending

    Name Description
    Ascending Sorts the members of the field in ascending order.
    Descending Sorts the members of the field in descending order.
    None Displays the members without sorting in any order.

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { rows: [{ fieldName: "Country", sortOrder : ej.PivotAnalysis.SortOrder.Descending }] } });

    dataSource.rows.drilledItems array

    Contains the list of members need to be drilled down by default in the field.

    Default Value: []

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { rows: [{ fieldName: "Country", drilledItems : ["Canada", "France"] }] } });

    dataSource.rows.filterItems object

    Applies the filter to field members.

    Default Value: null

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { rows: [{ fieldName: "Country", filterItems : { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }] } });

    dataSource.rows.filterItems.filterType enum

    Sets the type of filter to include/exclude the mentioned values.

    Note: This is applicable only for the relational datasource.

    Default Value: ej.PivotAnalysis.FilterType.Exclude

    Name Description
    Exclude Excludes the specified values among the members of the field.
    Include Includes the specified values alone among the members of the field.

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { rows: [{ fieldName: "Country", filterItems : { filterType: ej.PivotAnalysis.FilterType.Include, values: valueArray } }] } });

    dataSource.rows.filterItems.values array

    Contains the collection of items to be included/excluded among the field members.

    Default Value: []

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { rows: [{ fieldName: "Country", filterItems : { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }] } });

    dataSource.values array

    Lists out the items that support calculation in the PivotGrid.

    Default Value: []

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { values: itemsArray } });

    dataSource.values.fieldName string

    Allows you to bind the item by using its unique name as field name for the relational datasource.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { values: [{ fieldName : "MyFieldName" }] } });

    dataSource.values.fieldCaption string

    Allows you to set the display caption for the item in the relational datasource.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { values: [{ fieldCaption : "MyFieldCaption" }] } });

    dataSource.values.measures array

    This holds the list of unique names of measures to bind them from the OLAP cube.

    Default Value: []

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { values: [{ measures : itemsArray }] } });

    dataSource.values.measures.fieldName string

    Allows you to bind the measure from the OLAP datasource by using its unique name as field name.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { values: [{ measures : [{ fieldName: "MeasureUniqueName" }] }] } });

    dataSource.values.axis string

    Allows you to set the axis name to place measures items.

    Note: This is applicable only for the OLAP datasource.

    Default Value: “rows”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { values: [{ axis : ej.olap.AxisName.Row }] } });

    dataSource.values.isCalculatedField boolean

    Indicates whether the field is a calculated field with the relational datasource or not.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { values: [{ isCalculatedField : true }] } });

    dataSource.values.summaryType enum

    Allows to set the type of PivotGrid summary calculation in the value field with the relational datasource.

    Default Value: ej.PivotAnalysis.SummaryType.Sum

    Example:

    Name Description
    Sum Calculates the summary as the total of all values.
    Average Displays the average of all values as the summaries.
    Count Displays the count of items in summaries.
    Min Displays the minimum value of all the items in the summary.
    Max Displays the maximum value of all the items in the summary.
  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { values: [{ summaryType : ej.PivotAnalysis.SummaryType.Average }] } });

    dataSource.values.format string

    Allows to set the format for values.

    Note: This is applicable only for the relational datasource.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { values: [{ format : "percentage" }] } });

    dataSource.values.formatString string

    This property is set to display the formatted values with format types in the PivotGrid.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { values: [{ formatString : "MM/DD/YYYY" }] } });

    dataSource.values.formula string

    Allows to set the formula for calculation of values for calculated members in the relational datasource.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { values: [{ formula : "Quantity*10" }] } });

    dataSource.values.cssClass string

    Allows to set the custom theme for values.

    Note: This is applicable only for the relational datasource.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { values: [{ cssClass : "className" }] } });

    dataSource.filters array

    Lists out the items which supports filtering of values without displaying the members in UI of the PivotGrid.

    Default Value: []

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { filters: itemsArray } });

    dataSource.filters.fieldName string

    Allows you to bind the item by using its unique name as field name.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { filters: [{ fieldName : "MyFieldName" }] } });

    dataSource.filters.fieldCaption string

    Allows you to set the display name for the item.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { filters: [{ fieldCaption : "MyFieldCaption" }] } });

    dataSource.filters.filterItems object

    Applies the filter to field members.

    Default Value: null

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { filters: [{ fieldName: "Country", filterItems : { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }] } });

    dataSource.filters.filterItems.filterType enum

    Sets the type of filter to include/exclude the mentioned values.

    Note: This is applicable only for the relational datasource.

    Default Value: ej.PivotAnalysis.FilterType.Exclude

    Name Description
    Exclude Excludes the specified values among the members of the field.
    Include Includes the specified values alone among the members of the field.

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { filters: [{ fieldName: "Country", filterItems : { filterType: ej.PivotAnalysis.FilterType.Include, values: valueArray } }] } });

    dataSource.filters.filterItems.values array

    Contains the collection of items to be included/excluded among the field members.

    Default Value: []

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { filters: [{ fieldName: "Country", filterItems : { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }] } });

    dataSource.cube string

    Contains the respective cube name as string type in the OLAP database.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { cube: "Adventure Works" } });

    dataSource.sourceInfo string

    To set the data source name to fetch the data.

    Note: This is applicable only for the Mondrian connection.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { sourceInfo: "Provider Mondrian" } });

    dataSource.providerName string

    Sets the provider name for PivotGrid to identify whether the provider is SSAS or Mondrian.

    Note: This is applicable only for the client side OLAP data.

    Default Value: “ssas”

    Name Description
    ssas To bind an OLAP data source to PivotGrid through SSAS provider.
    mondrian To bind a relational data source to PivotGrid through Mondrian provider.

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { providerName: "mondrian" } });

    dataSource.data object

    Provides the raw data source for the PivotGrid.

    Default Value: null

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { data: value } });

    dataSource.catalog string

    In connection with an OLAP database, this property contains the database name as string to fetch the data from the given connection string.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid( { dataSource: { catalog: "databaseName" } } );

    dataSource.enableAdvancedFilter boolean

    Allows you to filter the members (by its name and values) through advanced filtering (e.g., Microsoft Excel) option at OLAP data source in client-mode.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { enableAdvancedFilter: true } });

    dataSource.reportName string

    Sets a name to the report that is bound to the control.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { reportName: "Default Report" } });

    dataSource.pagerOptions object

    Allows to set the page size and current page number for each axis on applying the paging.

    Note: This is applicable only for binding the OLAP data from client-side.

    Default Value: {}

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { pagerOptions: pagerSettings } });

    dataSource.pagerOptions.categoricalPageSize number

    Allows to set the number of categorical columns to be displayed in each page on applying the paging.

    Default Value: 0

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { pagerOptions: { categoricalPageSize: 10 } } });

    dataSource.pagerOptions.seriesPageSize number

    Allows to set the number of series rows to be displayed in each page on applying the paging.

    Default Value: 0

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { pagerOptions: { seriesPageSize: 5 } } });

    dataSource.pagerOptions.categoricalCurrentPage number

    Allows to set the page number to be loaded in the categorical axis by default.

    Note: This is applicable only for binding the OLAP data from client-side.

    Default Value: 1

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { pagerOptions: { categoricalCurrentPage: 3 } } });

    dataSource.pagerOptions.seriesCurrentPage number

    Allows to set the page number to be loaded in the series axis by default.

    Default Value: 1

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ dataSource: { pagerOptions: { seriesCurrentPage: 7 } } });

    valueSortSettings object

    Holds the necessary properties for value sorting.

    Note: This is applicable only for the relational datasource.

    Default Value: {}

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ valueSortSettings: { } });

    valueSortSettings.headerText string

    Contains the header of the specific column to which value sorting is applied.

    Note: This is applicable only for the relational datasource.

    Default Value: “”

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ valueSortSettings: { headerText: "Bike##FY 2005##Amount" } });

    valueSortSettings.headerDelimiters string

    Allows you to set the string for separating column headers provided in the headerText property.

    Note: This is applicable only for the relational datasource.

    Default Value: “”

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ valueSortSettings: { headerDelimiters: "##" } });

    valueSortSettings.sortOrder enum

    Allows you to set the sorting order of values of the field.

    Note: This is applicable only for the relational datasource.

    Default Value: ej.PivotAnalysis.SortOrder.Ascending

    Name Description
    Ascending Sorts the members of the field in ascending order.
    Descending Sorts the members of the field in descending order.
    None Displays the members without sorting in any order.
  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ valueSortSettings: { sortOrder: ej.PivotAnalysis.SortOrder.Descending } });

    frozenHeaderSettings object

    Object that holds the settings of frozen headers.

    Default Value: {}

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ frozenHeaderSettings: { enableFrozenHeaders: true } });

    frozenHeaderSettings.enableFrozenRowHeaders boolean

    Allows you to freeze the row headers alone when scrolling the horizontal scroll bar.

    Default Value: false

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ frozenHeaderSettings: { enableFrozenRowHeaders: true } });

    frozenHeaderSettings.enableFrozenColumnHeaders boolean

    Allows you to freeze the column headers alone when scrolling the vertical scroll bar.

    Default Value: false

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ frozenHeaderSettings: { enableFrozenColumnHeaders: true } });

    frozenHeaderSettings.enableFrozenHeaders boolean

    Allows you to freeze both row headers and column headers while scrolling.

    Default Value: false

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ frozenHeaderSettings: { enableFrozenHeaders: true } });

    frozenHeaderSettings.scrollerSize number

    Allows you to set the size of the scrollbar (horizontal and vertical) that is visible in the PivotGrid.

    Default Value: 18

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ frozenHeaderSettings: { scrollerSize: 18 } });

    headerSettings object

    Allows you to display the header name in the PivotGrid control.

    Default Value: {}

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ headerSettings: { showRowItems: true, showColumnItems: true } });

    headerSettings.showRowItems boolean

    Allows you to enable/disable the row header names in the PivotGrid control.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ headerSettings: { showRowItems: true } });

    headerSettings.showColumnItems boolean

    Allows you to enable/disable the column header names in the PivotGrid control.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ headerSettings: { showColumnItems: true } });

    showUniqueNameOnPivotButton boolean

    Allows you to show the appropriate unique name in the pivot button.

    Note: This is applicable only for the OLAP datasource.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ showUniqueNameOnPivotButton: true });

    customObject object

    Object is utilized to pass additional information between the client-end and the service-end while operating the control in server mode.

    Default Value: null

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ customObject: { Language: "en-US" } });

    collapsedMembers object

    Allows you to collapse specified members in each field by default.

    Default Value: null

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ collapsedMembers: { Country: ["Canada", "France"] } });

    enableCellContext boolean

    Allows you to access each cell by right-clicking the mouse.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enableCellContext: true });

    enableCellSelection boolean

    Enables the cell selection for a specific range of value cells.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enableCellSelection: true });

    enableDrillThrough boolean

    Enables the Drill-Through feature which retrieves raw items that are used to create a specific cell in the PivotGrid.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enableDrillThrough: true });

    enableCellClick boolean

    Allows you to get cell details in JSON format by clicking the value cell.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enableCellClick: true });

    enableCellDoubleClick boolean

    Allows you to get cell details in JSON format by double-clicking the value cell.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enableCellDoubleClick: true });

    enableCellEditing boolean

    Allows you to edit value cells for write-back support in the PivotGrid. This is applicable only for the server-mode.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enableCellEditing:true });

    enableCollapseByDefault boolean

    Collapses the pivot items along rows and columns by default. It works only for the relational data source.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enableCollapseByDefault: true });

    enableColumnGrandTotal boolean

    Enables/disables the display of grand total for all columns.

    Default Value: true

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enableColumnGrandTotal: true });

    enableConditionalFormatting boolean

    Allows you to format a specific set of cells based on the condition.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enableConditionalFormatting:true });

    enableAdvancedFilter boolean

    Enables the advanced filtering options such as value filtering, label filtering, and sorting for each field in the server mode.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enableAdvancedFilter: true });

    enableDeferUpdate boolean

    Allows you to refresh the control on-demand and not during every UI operation.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enableDeferUpdate: true });

    enableGroupingBar boolean

    Enables the display of GroupingBar allowing you to filter, sort, and remove fields obtained from the datasource.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enableGroupingBar: true });

    maxNodeLimitInMemberEditor number

    Allows you to set the maximum number of nodes as well as child nodes to be displayed in the member editor.

    Default Value: 1000

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ maxNodeLimitInMemberEditor: 1500 });

    enableMemberEditorPaging boolean

    Enables/disables paging in the member editor for viewing the large count of members in pages.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enableMemberEditorPaging: true });

    memberEditorPageSize number

    Allows you to set the number of members to be displayed in each page of member editor on applying paging in it.

    Default Value: 100

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ memberEditorPageSize: 50 });

    enableMemberEditorSorting boolean

    Enables/Disables sorting option in member editor dialog for the members of the respective field.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enableMemberEditorSorting: true });

    enableGrandTotal boolean

    Enables/disables the display of grand total for rows and columns.

    Default Value: true

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enableGrandTotal: true });

    enableJSONRendering boolean

    Allows you to load the PivotGrid using the JSON data.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enableJSONRendering: true });

    enablePivotFieldList boolean

    Enables rendering of the PivotGrid widget along with the PivotTable field list which allows UI operations.

    Default Value: true

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enablePivotFieldList: true });

    enableRowGrandTotal boolean

    Enables the display of grand total for all rows.

    Default Value: true

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enableRowGrandTotal: true });

    enableRTL boolean

    Allows you to view the layout of PivotGrid from right to left.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enableRTL: true });

    enableToolTip boolean

    Allows you to enable the ToolTip.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enableToolTip: true });

    enableToolTipAnimation boolean

    Allows you to enable the animation effects in the tooltip.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enableToolTipAnimation: true });

    enableColumnResizing boolean

    Allows you to adjust the width of columns dynamically within given widget size.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enableColumnResizing: true });

    resizeColumnsToFit boolean

    Allows you to fit the width of the column based on its maximum text width.

    Default Value: true

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ resizeColumnsToFit: true });

    enableContextMenu boolean

    Allows you to enable/disable the context menu of pivot buttons in the PivotGrid.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enableContextMenu: true });

    enableVirtualScrolling boolean

    Allows you to view the large amount of data through virtual scrolling.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enableVirtualScrolling: true });

    enablePaging boolean

    Allows you to view the large amount of data by applying paging.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enablePaging: true });

    hyperlinkSettings object

    Allows you to configure the hyperlink settings of the PivotGrid control.

    Default Value: {}

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ hyperlinkSettings: { enableValueCellHyperlink: true, enableRowHeaderHyperlink: true } });

    Allows you to enable/disable the hyperlink for the column header.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ hyperlinkSettings: { enableColumnHeaderHyperlink: true } });

    Allows you to enable/disable the hyperlink for the row header.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ hyperlinkSettings: { enableRowHeaderHyperlink: true } });

    Allows you to enable/disable the hyperlink for summary cells.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ hyperlinkSettings: { enableSummaryCellHyperlink: true } });

    Allows you to enable/disable the hyperlink for value cells.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ hyperlinkSettings: { enableValueCellHyperlink: true } });

    isResponsive boolean

    Allows you to enable PivotGrid’s responsiveness in the browser layout.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ isResponsive: true });

    jsonRecords string

    Contains the serialized JSON string which renders the PivotGrid.

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ jsonRecords: serializedJSON });

    layout enum

    Sets the summary layout for PivotGrid.
    Following are the ways in which summary can be positioned: normal summary (bottom), top summary, no summary, and excel-like summary.

    Default Value: ej.PivotGrid.Layout.Normal

    Name Description
    Normal To set normal summary layout in PivotGrid.
    NormalTopSummary To set layout with summaries at the top in PivotGrid.
    NoSummaries To set layout without summaries in PivotGrid.
    ExcelLikeLayout To set excel-like layout in PivotGrid.

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ layout: ej.PivotGrid.Layout.NoSummaries });

    locale string

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

    Default Value: “en-US”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ locale: "en-US" });

    operationalMode enum

    Sets the mode for PivotGrid widget for binding the data source either in the server-side or client-side.

    Name Description
    ClientMode To bind data source completely from client-side.
    ServerMode To bind data source completely from server-side.

    Default Value: ej.Pivot.OperationalMode.ClientMode

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ operationalMode: ej.Pivot.OperationalMode.ServerMode });

    serviceMethodSettings object

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

    Default Value: {}

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ serviceMethodSettings: { initialize: "InitializeGrid"} });

    serviceMethodSettings.drillDown string

    Allows you to set the custom name for service method which is responsible for drill up/down operation in the PivotGrid.

    Default Value: “DrillGrid”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ serviceMethodSettings: { drillDown: "DrillGridMyMethod" } });

    serviceMethodSettings.exportPivotGrid string

    Allows you to set the custom name for the service method that is responsible for exporting.

    Default Value: “Export”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ serviceMethodSettings: { exportPivotGrid: "ExportMyMethod" } });

    serviceMethodSettings.deferUpdate string

    Allows you to set the custom name for the service method responsible for performing server-side actions based on defer update.

    Default Value: “DeferUpdate”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ serviceMethodSettings: { deferUpdate: "DeferUpdateMethod" } });

    serviceMethodSettings.fetchMembers string

    Allows you to set the custom name for the service method that is responsible for getting values of the tree-view inside filter dialog.

    Default Value: “FetchMembers”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ serviceMethodSettings:  { fetchMembers: "FetchMembersMethod" } });

    serviceMethodSettings.filtering string

    Allows you to set the custom name for the service method that is responsible for filtering operation in the PivotGrid.

    Default Value: “Filtering”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ serviceMethodSettings:  { filtering : "FilteringMethod" } });

    serviceMethodSettings.initialize string

    Allows you to set the custom name for the service method that is responsible for initializing the PivotGrid.

    Default Value: “InitializeGrid”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ serviceMethodSettings: { initialize: "InitializeGrid" } });

    serviceMethodSettings.nodeDropped string

    Allows you to set the custom name for the service method that is responsible for the server-side action when dropping a node from the field list.

    Default Value: “NodeDropped”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ serviceMethodSettings: { nodeDropped: "nodedroppedMethod" } });

    serviceMethodSettings.nodeStateModified string

    Allows you to set the custom name for the service method that is responsible for server-side action when changing the checked state of a node in the field list.

    Default Value: “NodeStateModified”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ serviceMethodSettings: { nodeStateModified: "NodeStateModifiedMethod" } });

    serviceMethodSettings.paging string

    Allows you to set the custom name for the service method that is responsible for performing paging operation in the PivotGrid.

    Default Value: “Paging”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ serviceMethodSettings: { paging: "PagingMyMethod" } });

    serviceMethodSettings.sorting string

    Allows you to set the custom name for the service method that is responsible for sorting operation in the PivotGrid.

    Default Value: “Sorting”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ serviceMethodSettings: { sorting: "SortingMethod" } });

    serviceMethodSettings.memberExpand string

    Allows you to set the custom name for the service method that is responsible for expanding members in the member editor.

    Default Value: “MemberExpanded”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ serviceMethodSettings: { memberExpand: "MemberExpandedMethod" } });

    serviceMethodSettings.cellEditing string

    Allows you to set the custom name for the service method that is responsible for editing the cells.

    Default Value: “CellEditing”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ serviceMethodSettings: { cellEditing: "MyCellEditingMethod" } });

    serviceMethodSettings.saveReport string

    Allows you to set the custom name for the service method that is responsible for saving the current report to the database.

    Default Value: “SaveReport”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ serviceMethodSettings: { saveReport: "MySaveReportMethod" } });

    serviceMethodSettings.loadReport string

    Allows you to set the custom name for the service method that is responsible for loading a report from the database.

    Default Value: “LoadReportFromDB”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ serviceMethodSettings: { loadReport: "MyLoadReportMethod" } });

    serviceMethodSettings.calculatedField string

    Allows you to set the custom name for the service method that is responsible for adding a calculated field to the report.

    Default Value: “CalculatedField”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ serviceMethodSettings: { calculatedField: "MyCalculatedFieldMethod" } });

    serviceMethodSettings.drillThroughHierarchies string

    Allows you to set the custom name for the service method that is responsible for performing the drill through operation.

    Default Value: “DrillThroughHierarchies”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ serviceMethodSettings: { drillThroughHierarchies: "MyDrillThroughHierarchiesMethod" } });

    serviceMethodSettings.drillThroughDataTable string

    Allows you to set the custom name for the service method that is responsible for performing drill through operation in the data table.

    Default Value: “DrillThroughDataTable”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ serviceMethodSettings: { drillThroughDataTable: "MyDrillThroughDataTableMethod" } });

    serviceMethodSettings.valueSorting string

    Allows you to set the custom name for the service method that is responsible for performing value sorting operation in the PivotGrid.

    Default Value: “ValueSorting”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ serviceMethodSettings: { valueSorting: "MyValueSorting" } });

    serviceMethodSettings.removeButton string

    Allows you to set the custom name for the service method that is responsible for removing the pivot button from the GroupingBar/field list.

    Default Value: “RemoveButton”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ serviceMethodSettings: { removeButton: "MyRemoveButton" } });

    serviceMethodSettings.writeBack string

    Allows you to set the custom name for the service method that is responsible for write-back operation in the OLAP Cube. This is applicable only in the server-side component.

    Default Value: “WriteBack”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ serviceMethodSettings: { writeBack: "WriteBackMethod" } });

    url string

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

    Default Value: “”

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ url: "/PivotService" });

    enableCompleteDataExport boolean

    Allows you to export entire data instead of current page data, while paging option is enabled.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({ enableCompleteDataExport: true });

    enableXHRCredentials boolean

    Allows you to enable “withCredentials” property inside XMLHttpRequest object for CORS(Cross-Origin Resource Sharing) request.

    Default Value: false

    Example:

  • JAVASCRIPT
  • $("#PivotGrid").ejPivotGrid({ enableXHRCredentials: true });

    Methods

    doAjaxPost()

    Performs an asynchronous HTTP (AJAX) request.

    Example:

  • JAVASCRIPT
  • var gridObj = $("#PivotGrid1").data("ejPivotGrid");
        gridObj.doAjaxPost("POST", "/PivotService/Initialize", { "key", "Hello World" }, successEvent, null);

    doPostBack()

    Performs an asynchronous HTTP (FullPost) submit.

    Example:

  • JAVASCRIPT
  • var gridObj = $("#PivotGrid1").data("ejPivotGrid");
        gridObj.doPostBack("/PivotService/Initialize", { "key", "Hello World" });

    exportPivotGrid()

    Exports the PivotGrid to the specified format.

    Example:

  • JAVASCRIPT
  • var gridObj = $("# PivotGrid1").data("ejPivotGrid");
        gridObj.exportPivotGrid(ej.PivotGrid.ExportOptions.Excel);

    refreshPagedPivotGrid()

    This function re-renders the PivotGrid when clicking the navigation buttons on the PivotPager.

    Example:

  • JAVASCRIPT
  • var gridObj = $("#PivotGrid1").data("ejPivotGrid");
        gridObj.refreshPagedPivotGrid("series", 2);

    refreshPivotGrid()

    This function refreshes the PivotGrid with the modified data input in client-mode.

    Example:

  • JAVASCRIPT
  • var gridObj = $("#PivotGrid1").data("ejPivotGrid");
        gridObj.refreshPivotGrid();

    refreshControl()

    This function re-renders the control with the report available at that instant.

    Example:

  • JAVASCRIPT
  • var gridObj = $("#PivotGrid1").data("ejPivotGrid");
        gridObj.model.dataSource = newDataSource;
        gridObj.refreshControl();

    destroy()

    This function destroys the PivotGrid widget associated events that are bound using “this._on” and brings the control to pre-init state.

    Example:

  • JAVASCRIPT
  • var gridObj = $("#PivotGrid1").data("ejPivotGrid");
        gridObj.destroy();

    calculateCellWidths()

    This function returns the height of all rows and the width of all columns.

    Returns:

    object

    Example:

  • JAVASCRIPT
  • var gridObj = $("#PivotGrid1").data("ejPivotGrid");
        var gridDimensions = gridObj.calculateCellWidths();

    openConditionalFormattingDialog()

    This function creates the conditional formatting dialog to apply conditional formatting for the PivotGrid control.

    Example:

  • JAVASCRIPT
  • var gridObj = $("#PivotGrid1").data("ejPivotGrid");
        gridObj.openConditionalFormattingDialog();

    saveReport()

    This function saves the current report to the database/local storage.

    Example:

  • JAVASCRIPT
  • var gridObj = $("#PivotGrid1").data("ejPivotGrid");
        var storageOption = "local"; //it takes the string value "local" for local storage and "database" for storing to database.
        var url = "";//it takes the service url for storing to database. For local it is not required.
        gridObj.saveReport("reportName", storageOption, url);

    loadReport()

    This function loads the specified report from the database/local storage.

    Example:

  • JAVASCRIPT
  • var gridObj = $("#PivotGrid1").data("ejPivotGrid");
        var storageOption = "local"; //it takes the string value "local" for loading a report from local storage and "database" for loading from database.
        var url = "";//it takes the service method url for loading report from database. For local it is not required.
        gridObj.loadReport("reportName", storageOption, url);

    excelLikeLayout()

    This function reconstructs the JSON data that is formed for rendering the PivotGrid in the excel-like layout format.

    Example:

  • JAVASCRIPT
  • var gridObj = $("#PivotGrid1").data("ejPivotGrid");
        gridObj.excelLikeLayout(JSONObjectArray);

    getOlapReport()

    Returns the OlapReport string that is maintained along with the axis elements information.

    Returns:

    string

    Example:

  • JAVASCRIPT
  • var gridObj = $("#PivotGrid1").data("ejPivotGrid");
        var report = gridObj.getOlapReport();

    setOlapReport()

    Sets the OlapReport string along with the axis information.

    Example:

  • JAVASCRIPT
  • var gridObj = $("#PivotGrid1").data("ejPivotGrid");
        gridObj.setOlapReport(olapReportObj);

    getJSONRecords()

    Returns the JSON records that are formed to render the control.

    Returns:

    array

    Example:

  • JAVASCRIPT
  • var gridObj = $("#PivotGrid1").data("ejPivotGrid");
        var jsonRecords = gridObj.getJSONRecords();

    setJSONRecords()

    Sets the JSON records that are formed to render the control.

    Example:

  • JAVASCRIPT
  • var gridObj = $("#PivotGrid1").data("ejPivotGrid");
        gridObj.setJSONRecords(jsonRecords);

    refreshFieldCaption()

    This function allows you to change the caption of the pivot item (name displayed in UI) on-demand for the relational datasource in client-mode.

    Example:

  • JAVASCRIPT
  • var gridObj = $("#PivotGrid1").data("ejPivotGrid");
        gridObj.refreshFieldCaption( "name", "caption", "axisClassName");

    renderControlFromJSON()

    This function receives the JSON formatted datasource to render the PivotGrid control.

    Example:

  • JAVASCRIPT
  • var gridObj = $("#PivotGrid1").data("ejPivotGrid");
        gridObj.renderControlFromJSON({ this.getJSONRecords() });

    Events

    afterServiceInvoke

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

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

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({
            afterServiceInvoke: function (args) {}
        });

    beforeServiceInvoke

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

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

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({
            beforeServiceInvoke: function (args) {}
        });

    beforePivotEnginePopulate

    Triggers before the pivot engine starts to populate.

    Event Parameters
    Name Type Description
    pivotGridObject object returns the PivotGrid object

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({
            beforePivotEnginePopulate: function (args) {}
        });

    cellClick

    Triggers when click action is performed over a value cell.

    Event Parameters
    Name Type Description
    selectedData array returns the JSON details of the respective on cell.
    customObject object returns the custom object bound with PivotGrid control.
    element object returns the HTML element of PivotGrid control.

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({
            cellClick: function (args) {}
        });

    cellDoubleClick

    Triggers when double-click action is performed over a value cell.

    Event Parameters
    Name Type Description
    selectedData array returns the JSON details of the double respective on cell.
    customObject object returns the custom object bound with PivotGrid control.
    element object returns the HTML element of PivotGrid control.

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({
            cellDoubleClick: function (args) {}
        });

    cellContext

    Triggers when right-click action is performed on a cell.

    Event Parameters
    Name Type Description
    cellPosition string returns the cell position (row index and column index) in table.
    cellType string returns the type of the cell.
    cellValue string returns the content of the cell.
    uniqueName string returns the unique name of levels/members.
    role string returns the role of the cell in PivotGrid.
    rawdata object returns JSON record corresponding to the selected cell.
    args object returns the original event object.

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({
            cellContext: function (args) {}
        });

    cellSelection

    Triggers when a specific range of value cells is selected.

    Event Parameters
    Name Type Description
    JSONRecords object returns the JSON records of the selected range of cells.
    rowheader object Returns the row headers corresponding to the selected value cells.
    columnheader object Returns the column headers corresponding to the selected value cells.
    measureCount string Returns the information about the measure associated with the selected cell.

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({
            cellSelection: function (args) {}
        });

    columnHeaderHyperlinkClick

    Triggers when the hyperlink of column header is clicked.

    Event Parameters
    Name Type Description
    args object returns the information about the clicked cell
    element object returns the HTML element of the control.
    customObject object returns the custom object bound to the control.

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({
            columnHeaderHyperlinkClick: function (args) {}
        });

    drillSuccess

    Triggers after performing drill operation in the PivotGrid.

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

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({
            drillSuccess: function (args) {}
        });

    drillThrough

    Triggers while clicking “OK” in the drill-through dialog.

    Event Parameters
    Name Type Description
    data object return the JSON records of the generated cells on drill-through operation.
    element object returns the HTML element of PivotGrid control.

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({
            drillThrough: function (args) {}
        });

    load

    Triggers when the PivotGrid loading is initiated.

    Event Parameters
    Name Type Description
    customObject object returns the custom object bound with the control.
    element object returns the HTML element of PivotGrid control.

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({
            load: function (args) {}
        });

    renderComplete

    Triggers when PivotGrid widget completes all operations at client-side after any AJAX request.

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

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({
            renderComplete: function (args) {}
        });

    renderFailure

    Triggers when any error occurred during the AJAX request.

    Event Parameters
    Name Type Description
    action string returns the current action of PivotGrid control.
    customObject Object returns the custom object bound with the control.
    element object returns the HTML element of PivotGrid control.
    message string returns the error message with error code.

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({
            renderFailure: function (args) {}
        });

    renderSuccess

    Triggers when the PivotGrid successfully reaches the client-side after any AJAX request.

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

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({
            renderSuccess: function (args) {}
        });

    rowHeaderHyperlinkClick

    Triggers when the hyperlink of row header is clicked.

    Event Parameters
    Name Type Description
    args object returns the information about the clicked cell
    element object returns the HTML element of the control.
    customObject object returns the custom object bound to the control.

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({
            rowHeaderHyperlinkClick: function (args) {}
        });

    summaryCellHyperlinkClick

    Triggers when the hyperlink of summary cell is clicked.

    Event Parameters
    Name Type Description
    args object returns the information about the clicked cell
    element object returns the HTML element of the control.
    customObject object returns the custom object bound to the control.

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({
            summaryCellHyperlinkClick: function (args) {}
        });

    valueCellHyperlinkClick

    Triggers when the hyperlink of value cell is clicked.

    Event Parameters
    Name Type Description
    args object returns the information about the clicked cell
    element object returns the HTML element of the control.
    customObject object returns the custom object bound to the control.

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({
            valueCellHyperlinkClick: function (args) {}
        });

    saveReport

    Triggers before saving the current report to the database.

    Event Parameters
    Name Type Description
    report object returns the report to be stored in database.

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({
            saveReport: function (args) {}
        });

    loadReport

    Triggers before loading a report from the database.

    Event Parameters
    Name Type Description
    targetControl object returns the PivotGrid object.
    dataModel string returns whether the control is bound with OLAP or Relational data source.

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({
            loadReport: function (args) {}
        });

    beforeExport

    Triggers before performing exporting in the pivot grid.

    Event Parameters
    Name Type Description
    url string contains the url of the service responsible for exporting.
    fileName string contains the name of the exporting file.

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({
            beforeExport: function (args) {}
        });

    cellEdit

    Triggers before editing the cells.

    Event Parameters
    Name Type Description
    editCellsInfo array contains the array of cells selected for editing.

    Example:

  • JAVASCRIPT
  • $("#PivotGrid1").ejPivotGrid({
            cellEdit: function (args) {}
        });