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

hyperlinkSettings.enableColumnHeaderHyperlink boolean

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

Default Value: false

Example:

JAVASCRIPT

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

hyperlinkSettings.enableRowHeaderHyperlink boolean

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

Default Value: false

Example:

JAVASCRIPT

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

hyperlinkSettings.enableSummaryCellHyperlink boolean

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

Default Value: false

Example:

JAVASCRIPT

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

hyperlinkSettings.enableValueCellHyperlink boolean

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