PivotGrid
21 Sep 201824 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.
Example
<ej-pivotgrid ></ej-pivotgrid>export class AppComponent {
//..
}Requires
- module:jQuery-3.0.0.min.js
- module:ej.core.js
- module:ej.data.js
- module:ej.touch.js
- module:ej.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 for binding 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:
<ej-pivotgrid [analysisMode]="analysisMode">
</ej-pivotgrid>export class AppComponent {
public analysisMode;
constructor()
{
this.analysisMode = ej.Pivot.AnalysisMode.Olap;
}
}cssClass string
Specifies the CSS class to PivotGrid to achieve custom theme.
Default Value: “”
Example:
<ej-pivotgrid cssClass="gradient-lime">
</ej-pivotgrid>export class PivotGridComponent {
//..
}pivotTableFieldListID string
Connects the PivotSchemaDesigner with the specified ID to the PivotGrid Control.
Default Value: “”
Example:
<ej-pivotgrid pivotTableFieldListID="pivotTableFieldListID">
</ej-pivotgrid>export class PivotGridComponent {
//..
}dataSource object
Initializes the data source for the PivotGrid widget, when it functions completely on client-side.
Default Value: {}
Example:
<ej-pivotgrid [dataSource]="dataSource">
</ej-pivotgrid>export class PivotGridComponent {
public dataSource;
constructor()
{
this.dataSource = { data: value };
}
}dataSource.columns array
Lists out the items to be arranged in columns section of PivotGrid.
Default Value: []
Example:
<ej-pivotgrid [dataSource.columns]="columns">
</ej-pivotgrid>export class PivotGridComponent {
public columns;
constructor()
{
this.columns = itemsArray;
}
}dataSource.columns.fieldName string
Allows the user to bind the item by using its unique name as field name.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.columns]="columns">
</ej-pivotgrid>export class PivotGridComponent {
public columns;
constructor()
{
this.columns = [{ fieldName : "MyFieldName" }] }];
}
}dataSource.columns.fieldCaption string
Allows the user to set the display caption for an item.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.columns]="columns">
</ej-pivotgrid>export class PivotGridComponent {
public columns;
constructor()
{
this.columns = [{ fieldCaption : "MyFieldCaption" }] }];
}
}dataSource.columns.advancedFilter array
Allows the user to filter the report by default using advanced filtering (excel-like) option for OLAP data source in client-mode.
Default Value: []
Example:
<ej-pivotgrid [dataSource.columns]="columns">
</ej-pivotgrid>export class PivotGridComponent {
public columns;
constructor()
{
this.columns = [{ advancedFilter : itemArray }];
}
}dataSource.columns.advancedFilter.name string
Allows the user to provide level unique name to perform advanced filtering.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.columns]="columns">
</ej-pivotgrid>export class PivotGridComponent {
public columns;
constructor()
{
this.columns = [{ advancedFilter : [{ advancedFilter : [{ name: "levelUniqueName" }] }] }];
}
}dataSource.columns.advancedFilter.labelFilterOperator string
Allows the user to set the operator to perform Label Filtering.
Default Value: “none”
Example:
<ej-pivotgrid [dataSource.columns]="columns">
</ej-pivotgrid>export class PivotGridComponent {
public columns;
constructor()
{
this.columns = [{ advancedFilter : [{ advancedFilter : [{ labelFilterOperator: ej.olap.LabelFilterOptions.EndsWith }] }] }];
}
}dataSource.columns.advancedFilter.valueFilterOperator string
Allows the user to set the operator to perform Value Filtering.
Default Value: “none”
Example:
<ej-pivotgrid [dataSource.columns]="columns">
</ej-pivotgrid>export class PivotGridComponent {
public columns;
constructor()
{
this.columns = [{ advancedFilter : [{ advancedFilter : [{ name: "levelUniqueName" }] }][{ valueFilterOperator: ej.olap.ValueFilterOptions.Between }] }];
}
}dataSource.columns.advancedFilter.advancedFilterType string
Allows the user to set the filtering type while performing advanced filtering.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.columns]="columns">
</ej-pivotgrid>export class PivotGridComponent {
public columns;
constructor()
{
this.columns = [{ advancedFilter : [{ advancedFilterType: ej.olap.AdvancedFilterType.LabelFilter }] }];
}
}dataSource.columns.advancedFilter.measure string
In case of value filtering, this property contains the measure name to which the filter is applied.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.columns]="columns">
</ej-pivotgrid>export class PivotGridComponent {
public columns;
constructor()
{
this.columns = [{ advancedFilter : [{ measure: "measureUniqueName", advancedFilterType: ej.olap.AdvancedFilterType.ValueFilter }] }];
}
}dataSource.columns.advancedFilter.values array
Allows the user to hold the filter operand values in advanced filtering.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.columns]="columns">
</ej-pivotgrid>export class PivotGridComponent {
public columns;
constructor()
{
//For Label Filters
this.columns = [{ advancedFilter : [{ labelFilterOperator: ej.olap.LabelFilterOptions.EndsWith, values: ["002"] }] }];
//For Label Filters
this.columns = [{ advancedFilter : [{ valueFilterOperator: ej.olap.ValueFilterOptions.GreaterThan, values: ["200"] }] }];
}
}dataSource.columns.isNamedSets boolean
Allows the user to indicate whether the added item is a named set or not.
Note: This is only applicable for OLAP datasource.
Default Value: false
Example:
<ej-pivotgrid [dataSource.columns]="columns">
</ej-pivotgrid>export class PivotGridComponent {
public columns;
constructor()
{
this.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 Relational datasource.
Default Value: true
Example:
<ej-pivotgrid [dataSource.columns]="columns">
</ej-pivotgrid>export class PivotGridComponent {
public columns;
constructor()
{
this.columns = [{ fieldName: "Country", showSubTotal : false }];
}
}dataSource.columns.format string
Allows to set the format for the column headers.
Note: This is applicable only for Relational datasource.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.columns]="columns">
</ej-pivotgrid>export class PivotGridComponent {
public columns;
constructor()
{
this.columns = [{ format : "date" }];
}
}dataSource.columns.formatString string
This property sets type of display of date.
Note: This is applicable only when the format is set as “date”.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.columns]="columns">
</ej-pivotgrid>export class PivotGridComponent {
public columns;
constructor()
{
this.columns = [{ formatString : "MM/DD/YYYY" }];
}
}dataSource.columns.cssClass string
Allows to set the custom theme for the column headers.
Note: This is applicable only for Relational datasource.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.columns]="columns">
</ej-pivotgrid>export class PivotGridComponent {
public columns;
constructor()
{
this.columns = [{ cssClass : "className" }];
}
}dataSource.columns.delimiter string
Allows the user to set delimiter for date type format in formatString. This is applicable for groupByDate option for row/column headers.
Note: This is applicable only for Relational datasource with ClientMode.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.columns]="columns">
</ej-pivotgrid>export class PivotGridComponent {
public columns;
constructor()
{
this.columns = [{ delimiter : "-" }];
}
}dataSource.columns.sortOrder enum
Allows the user to set the sorting order of the members of the field.
Note: This is applicable for Relational datasource only.
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:
<ej-pivotgrid [dataSource.columns]="columns">
</ej-pivotgrid>export class PivotGridComponent {
public columns;
constructor()
{
this.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:
<ej-pivotgrid [dataSource.columns]="columns">
</ej-pivotgrid>export class PivotGridComponent {
public columns;
constructor()
{
this.columns = [{ fieldName: "Country", drilledItems: ["Canada", "France"] }];
}
}dataSource.columns.filterItems object
Applies filter to the field members.
Default Value: null
Example:
<ej-pivotgrid [dataSource.columns]="columns">
</ej-pivotgrid>export class PivotGridComponent {
public columns;
constructor()
{
this.columns = [{ fieldName: "Country", filterItems: { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }];
}
}dataSource.columns.filterItems.filterType enum
Sets the type of filter whether to include/exclude the mentioned values.
Note: This is applicable for Relational datasource only.
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:
<ej-pivotgrid [dataSource.columns]="columns">
</ej-pivotgrid>export class PivotGridComponent {
public columns;
constructor()
{
this.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:
<ej-pivotgrid [dataSource.columns]="columns">
</ej-pivotgrid>export class PivotGridComponent {
public columns;
constructor()
{
this.columns = [{ fieldName: "Country", filterItems: { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }];
}
}dataSource.columns.groupByDate object
Allows the user to group the field by date. This is applicable only when the format is set as “date”.
Note: This is applicable only for Relational datasource with ClientMode.
Default Value: {}
Example:
<ej-pivotgrid [dataSource.columns]="columns">
</ej-pivotgrid>export class PivotGridComponent {
public columns;
constructor()
{
this.columns = [{ fieldName: "Date", format: "date", formatString: "yyyy-MM-dd", delimiter: "-", groupByDate: { } }];
}
}dataSource.columns.groupByDate.interval array
Specifies the intervals to separating the date and time.
Default Value: []
Example:
<ej-pivotgrid [dataSource.columns]="columns">
</ej-pivotgrid>export class PivotGridComponent {
public columns;
constructor()
{
this.columns = [{ fieldName: "Date", format: "date", formatString: "yyyy-MM-dd", delimiter: "-", groupByDate: { interval: ["yyyy", "qqq", "MMMM", "dd-MMM"] } }];
}
}dataSource.rows array
Lists out the items to be arranged in rows section of PivotGrid.
Default Value: []
Example:
<ej-pivotgrid [dataSource.rows]="rows">
</ej-pivotgrid>export class PivotGridComponent {
public rows;
constructor()
{
this.rows = itemsArray;
}
}dataSource.rows.fieldName string
Allows the user to bind the item by using its unique name as field name.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.rows]="rows">
</ej-pivotgrid>export class PivotGridComponent {
public rows;
constructor()
{
this.rows = [{ fieldName : "MyFieldName" }] }];
}
}dataSource.rows.fieldCaption string
Allows the user to set the display caption for an item.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.rows]="rows">
</ej-pivotgrid>export class PivotGridComponent {
public rows;
constructor()
{
this.rows = [{ fieldCaption : "MyFieldCaption" }] }];
}
}dataSource.rows.advancedFilter array
Allows the user to filter the report by default using advanced filtering (excel-like) option for OLAP data source in client-mode.
Default Value: []
Example:
<ej-pivotgrid [dataSource.rows]="rows">
</ej-pivotgrid>export class PivotGridComponent {
public rows;
constructor()
{
this.rows = [{ advancedFilter : itemArray }];
}
}dataSource.rows.advancedFilter.name string
Allows the user to provide level unique name to perform advanced filtering.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.rows]="rows">
</ej-pivotgrid>export class PivotGridComponent {
public rows;
constructor()
{
this.rows = [{ advancedFilter : [{ advancedFilter : [{ name: "levelUniqueName" }] }] }];
}
}dataSource.rows.advancedFilter.labelFilterOperator string
Allows the user to set the operator to perform Label Filtering.
Default Value: “none”
Example:
<ej-pivotgrid [dataSource.rows]="rows">
</ej-pivotgrid>export class PivotGridComponent {
public rows;
constructor()
{
this.rows = [{ advancedFilter : [{ advancedFilter : [{ labelFilterOperator: ej.olap.LabelFilterOptions.EndsWith }] }] }];
}
}dataSource.rows.advancedFilter.valueFilterOperator string
Allows the user to set the operator to perform Value Filtering.
Default Value: “none”
Example:
<ej-pivotgrid [dataSource.rows]="rows">
</ej-pivotgrid>export class PivotGridComponent {
public rows;
constructor()
{
this.rows = [{ advancedFilter : [{ advancedFilter : [{ name: "levelUniqueName" }] }][{ valueFilterOperator: ej.olap.ValueFilterOptions.Between }] }];
}
}dataSource.rows.advancedFilter.advancedFilterType string
Allows the user to set the filtering type while performing advanced filtering.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.rows]="rows">
</ej-pivotgrid>export class PivotGridComponent {
public rows;
constructor()
{
this.rows = [{ advancedFilter : [{ advancedFilterType: ej.olap.AdvancedFilterType.LabelFilter }] }];
}
}dataSource.rows.advancedFilter.measure string
In case of value filtering, this property contains the measure name to which the filter is applied.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.rows]="rows">
</ej-pivotgrid>export class PivotGridComponent {
public rows;
constructor()
{
this.rows = [{ advancedFilter : [{ measure: "measureUniqueName", advancedFilterType: ej.olap.AdvancedFilterType.ValueFilter }] }];
}
}dataSource.rows.advancedFilter.values array
Allows the user to hold the filter operand values in advanced filtering.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.rows]="rows">
</ej-pivotgrid>export class PivotGridComponent {
public rows;
constructor()
{
//For Label Filters
this.rows = [{ advancedFilter : [{ labelFilterOperator: ej.olap.LabelFilterOptions.EndsWith, values: ["002"] }] }];
//For Label Filters
this.rows = [{ advancedFilter : [{ valueFilterOperator: ej.olap.ValueFilterOptions.GreaterThan, values: ["200"] }] }];
}
}dataSource.rows.isNamedSets boolean
Allows the user to indicate whether the added item is a named set or not.
Note: This is only applicable for OLAP datasource.
Default Value: false
Example:
<ej-pivotgrid [dataSource.rows]="rows">
</ej-pivotgrid>export class PivotGridComponent {
public rows;
constructor()
{
this.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 Relational datasource.
Default Value: true
Example:
<ej-pivotgrid [dataSource.rows]="rows">
</ej-pivotgrid>export class PivotGridComponent {
public rows;
constructor()
{
this.rows = [{ fieldName: "Country", showSubTotal : false }];
}
}dataSource.rows.format string
Allows to set the format for the row headers.
Note: This is applicable only for Relational datasource.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.rows]="rows">
</ej-pivotgrid>export class PivotGridComponent {
public rows;
constructor()
{
this.rows = [{ format : "date" }];
}
}dataSource.rows.formatString string
This property sets type of display of date.
Note: This is applicable only when the format is set as “date”.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.rows]="rows">
</ej-pivotgrid>export class PivotGridComponent {
public rows;
constructor()
{
this.rows = [{ formatString : "MM/DD/YYYY" }];
}
}dataSource.rows.cssClass string
Allows to set the custom theme for the row headers.
Note: This is applicable only for Relational datasource.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.rows]="rows">
</ej-pivotgrid>export class PivotGridComponent {
public rows;
constructor()
{
this.rows = [{ cssClass : "className" }];
}
}dataSource.rows.delimiter string
Allows the user to set delimiter for date type format in formatString. This is applicable for groupByDate option for row/column headers.
Note: This is applicable only for Relational datasource with ClientMode.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.rows]="rows">
</ej-pivotgrid>export class PivotGridComponent {
public rows;
constructor()
{
this.rows = [{ delimiter : "-" }];
}
}dataSource.rows.sortOrder enum
Allows the user to set the sorting order of the members of the field.
Note: This is applicable for Relational datasource only.
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:
<ej-pivotgrid [dataSource.rows]="rows">
</ej-pivotgrid>export class PivotGridComponent {
public rows;
constructor()
{
this.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:
<ej-pivotgrid [dataSource.rows]="rows">
</ej-pivotgrid>export class PivotGridComponent {
public rows;
constructor()
{
this.rows = [{ fieldName: "Country", drilledItems: ["Canada", "France"] }];
}
}dataSource.rows.filterItems object
Applies filter to the field members.
Default Value: null
Example:
<ej-pivotgrid [dataSource.rows]="rows">
</ej-pivotgrid>export class PivotGridComponent {
public rows;
constructor()
{
this.rows = [{ fieldName: "Country", filterItems: { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }];
}
}dataSource.rows.filterItems.filterType enum
Sets the type of filter whether to include/exclude the mentioned values.
Note: This is applicable for Relational datasource only.
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:
<ej-pivotgrid [dataSource.rows]="rows">
</ej-pivotgrid>export class PivotGridComponent {
public rows;
constructor()
{
this.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:
<ej-pivotgrid [dataSource.rows]="rows">
</ej-pivotgrid>export class PivotGridComponent {
public rows;
constructor()
{
this.rows = [{ fieldName: "Country", filterItems: { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }];
}
}dataSource.rows.groupByDate object
Allows the user to group the field by date. This is applicable only when the format is set as “date”.
Note: This is applicable only for Relational datasource with ClientMode.
Default Value: {}
Example:
<ej-pivotgrid [dataSource.rows]="rows">
</ej-pivotgrid>export class PivotGridComponent {
public rows;
constructor()
{
this.rows = [{ fieldName: "Date", format: "date", formatString: "yyyy-MM-dd", delimiter: "-", groupByDate: { } }];
}
}dataSource.rows.groupByDate.interval array
Specifies the intervals to separating the date and time.
Default Value: []
Example:
<ej-pivotgrid [dataSource.rows]="rows">
</ej-pivotgrid>export class PivotGridComponent {
public rows;
constructor()
{
this.rows = [{ fieldName: "Date", format: "date", formatString: "yyyy-MM-dd", delimiter: "-", groupByDate: { interval: ["yyyy", "qqq", "MMMM", "dd-MMM"] } }];
}
}dataSource.values array
Lists out the items which supports calculation in PivotGrid.
Default Value: []
Example:
<ej-pivotgrid [dataSource.values]="values">
</ej-pivotgrid>export class PivotGridComponent {
public values;
constructor()
{
this.values = itemsArray;
}
}dataSource.values.fieldName string
Allows the user to bind the item by using its unique name as field name for Relational datasource.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.values]="values">
</ej-pivotgrid>export class PivotGridComponent {
public values;
constructor()
{
this.values = [{ fieldName : "MyFieldName" }] }];
}
}dataSource.values.fieldCaption string
Allows the user to set the display caption for an item for Relational datasource.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.values]="values">
</ej-pivotgrid>export class PivotGridComponent {
public values;
constructor()
{
this.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:
<ej-pivotgrid [dataSource.values]="values">
</ej-pivotgrid>export class PivotGridComponent {
public values;
constructor()
{
this.values = [{ measures: itemsArray }];
}
}dataSource.values.measures.fieldName string
Allows the user to bind the measure from OLAP datasource by using its unique name as field name.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.values]="values">
</ej-pivotgrid>export class PivotGridComponent {
public values;
constructor()
{
this.values = [{ measures: [{ fieldName: "MeasureUniqueName" }] }];
}
}dataSource.values.axis string
Allows to set the axis name to place the measures items.
Note: This is applicable for OLAP datasource only.
Default Value: “rows”
Example:
<ej-pivotgrid [dataSource.values]="values">
</ej-pivotgrid>export class PivotGridComponent {
public values;
constructor()
{
this.values = [{ axis : ej.olap.AxisName.Row }];
}
}dataSource.values.isCalculatedField boolean
Indicates whether the field is a calculated field or not with Relational datasource.
Default Value: false
Example:
<ej-pivotgrid [dataSource.values]="values">
</ej-pivotgrid>export class PivotGridComponent {
public values;
constructor()
{
this.values = [{ isCalculatedField : true }];
}
}dataSource.values.summaryType enum
Allows to set the type of PivotGrid summary calculation for the value field with 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. |
<ej-pivotgrid [dataSource.values]="values">
</ej-pivotgrid>export class PivotGridComponent {
public values;
constructor()
{
this.values = [{ summaryType : ej.PivotAnalysis.SummaryType.Average }];
}
}dataSource.values.format string
Allows to set the format for the values.
Note: This is applicable only for Relational datasource.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.values]="values">
</ej-pivotgrid>export class PivotGridComponent {
public values;
constructor()
{
this.values = [{ format : "percentage" }];
}
}dataSource.values.formatString string
This property sets type of display of date.
Note: This is applicable only when the format is set as “date”.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.values]="values">
</ej-pivotgrid>export class PivotGridComponent {
public values;
constructor()
{
this.values = [{ formatString : "MM/DD/YYYY" }];
}
}dataSource.values.formula string
Allows to set the formula for calculation of values for calculated members in Relational datasource.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.values]="values">
</ej-pivotgrid>export class PivotGridComponent {
public values;
constructor()
{
this.values = [{ formula : "Quantity*10" }];
}
}dataSource.values.cssClass string
Allows to set the custom theme for the values.
Note: This is applicable only for Relational datasource.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.values]="values">
</ej-pivotgrid>export class PivotGridComponent {
public values;
constructor()
{
this.values = [{ cssClass : "className" }];
}
}dataSource.filters array
Lists out the items which supports filtering of values without displaying the members in UI in PivotGrid.
Default Value: []
Example:
<ej-pivotgrid [dataSource.filters]="filters">
</ej-pivotgrid>export class PivotGridComponent {
public filters;
constructor()
{
this.filters = itemsArray;
}
}dataSource.filters.fieldName string
Allows the user to bind the item by using its unique name as field name.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.filters]="filters">
</ej-pivotgrid>export class PivotGridComponent {
public filters;
constructor()
{
this.filters = [{ fieldName : "MyFieldName" }];
}
}dataSource.filters.fieldCaption string
Allows the user to set the display name for an item.
Default Value: “”
Example:
<ej-pivotgrid [dataSource.filters]="filters">
</ej-pivotgrid>export class PivotGridComponent {
public filters;
constructor()
{
this.filters = [{ fieldCaption : "MyFieldCaption" }];
}
}dataSource.filters.filterItems object
Applies filter to the field members.
Default Value: null
Example:
<ej-pivotgrid [dataSource.filters]="filters">
</ej-pivotgrid>export class PivotGridComponent {
public filters;
constructor()
{
this.filters = [{ fieldName: "Country", filterItems : { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }];
}
}dataSource.filters.filterItems.filterType enum
Sets the type of filter whether to include/exclude the mentioned values.
Note: This is applicable for Relational datasource only.
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:
<ej-pivotgrid [dataSource.filters]="filters">
</ej-pivotgrid>export class PivotGridComponent {
public filters;
constructor()
{
this.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:
<ej-pivotgrid [dataSource.filters]="filters">
</ej-pivotgrid>export class PivotGridComponent {
public filters;
constructor()
{
this.filters = [{ fieldName: "Country", filterItems : { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }];
}
}dataSource.cube string
Contains the respective cube name from OLAP database as string type.
Default Value: “”
Example:
<ej-pivotgrid dataSource.cube="Adventure Works">
</ej-pivotgrid>export class PivotGridComponent {
//..
}dataSource.sourceInfo string
To set the data source name to fetch data from that.
Note: This is applicable only for Mondrian connection.
Default Value: “”
Example:
<ej-pivotgrid dataSource.sourceInfo="Provider Mondrian">
</ej-pivotgrid>export class PivotGridComponent {
//..
}dataSource.providerName string
Set the provider name for PivotGrid to identify whether the provider is SSAS or Mondrian.
Note: This is applicable only for 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:
<ej-pivotgrid dataSource.providerName="mondrian">
</ej-pivotgrid>export class PivotGridComponent {
//..
}dataSource.data object
Provides the raw data source for the PivotGrid.
Default Value: null
Example:
<ej-pivotgrid [dataSource.data]="data">
</ej-pivotgrid>export class PivotGridComponent {
public data;
constructor()
{
this.data = "http://bi.syncfusion.com/olap/msmdpump.dll";
}
}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:
<ej-pivotgrid dataSource.catalog="Adventure Works DW 2008 SE">
</ej-pivotgrid>export class PivotGridComponent {
//..
}dataSource.enableAdvancedFilter boolean
Allows user to filter the members (by its name and values) through advanced filtering (excel-like) option for OLAP data source in client-mode.
Default Value: false
Example:
<ej-pivotgrid [dataSource.enableAdvancedFilter]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}dataSource.reportName string
Sets a name to the report bound to the control.
Default Value: “”
Example:
<ej-pivotgrid dataSource.reportName="Default Report">
</ej-pivotgrid>export class PivotGridComponent {
//..
}dataSource.pagerOptions object
Allows to set the page size and current page number for each axis on applying paging.
Note: This is applicable only for binding OLAP data from client-side.
Default Value: {}
Example:
<ej-pivotgrid [dataSource.pagerOptions]="pagerOptions">
</ej-pivotgrid>export class PivotGridComponent {
public pagerOptions;
constructor()
{
this.pagerOptions = pagerSettings;
}
}dataSource.pagerOptions.categoricalPageSize number
Allows to set the number of categorical columns to be displayed in each page on applying paging.
Default Value: 0
Example:
<ej-pivotgrid [dataSource.pagerOptions.categoricalPageSize]=10>
</ej-pivotgrid>export class PivotGridComponent {
//..
}dataSource.pagerOptions.seriesPageSize number
Allows to set the number of series rows to be displayed in each page on applying paging.
Default Value: 0
Example:
<ej-pivotgrid [dataSource.pagerOptions.seriesPageSize]=5>
</ej-pivotgrid>export class PivotGridComponent {
//..
}dataSource.pagerOptions.categoricalCurrentPage number
Allows to set the page number in categorical axis to be loaded by default.
Note: This is applicable only for binding OLAP data from client-side.
Default Value: 1
Example:
<ej-pivotgrid [dataSource.pagerOptions.categoricalCurrentPage]=3>
</ej-pivotgrid>export class PivotGridComponent {
//..
}dataSource.pagerOptions.seriesCurrentPage number
Allows to set the page number in series axis to be loaded by default.
Default Value: 1
Example:
<ej-pivotgrid [dataSource.pagerOptions.seriesCurrentPage]=7>
</ej-pivotgrid>export class PivotGridComponent {
//..
}valueSortSettings object
Holds the necessary properties for value sorting.
Note: This is applicable for Relational datasource only.
Default Value: {}
Example:
<ej-pivotgrid [valueSortSettings]="valueSortSettings">
</ej-pivotgrid>export class PivotGridComponent {
public valueSortSettings;
constructor()
{
this.valueSortSettings = valueSortSettings;
}
}valueSortSettings.headerText string
Contains the headers of the specific column to which value sorting is applied.
Note: This is applicable for Relational datasource only.
Default Value: “”
Example:
<ej-pivotgrid valueSortSettings.headerText="Bike##FY 2005##Amount">
</ej-pivotgrid>export class PivotGridComponent {
//..
}valueSortSettings.headerDelimiters string
Allows the user to set the string for separating column headers provided in the above property headerText.
Note: This is applicable for Relational datasource only.
Default Value: “”
Example:
<ej-pivotgrid valueSortSettings.headerDelimiters="##">
</ej-pivotgrid>export class PivotGridComponent {
//..
}valueSortSettings.sortOrder enum
Allows the user to set the sorting order of the values of the field.
Note: This is applicable for Relational datasource only.
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:
<ej-pivotgrid [valueSortSettings.sortOrder]="sortOrder">
</ej-pivotgrid>export class PivotGridComponent {
public sortOrder;
constructor()
{
this.sortOrder = ej.PivotAnalysis.SortOrder.Descending;
}
}frozenHeaderSettings object
Object that holds the settings of frozen headers.
Default Value: {}
Example:
<ej-pivotgrid [frozenHeaderSettings]="frozenHeaderSettings">
</ej-pivotgrid>export class PivotGridComponent {
public frozenHeaderSettings;
constructor()
{
this.frozenHeaderSettings = frozenHeaderSettings;
}
}frozenHeaderSettings.enableFrozenRowHeaders boolean
Allows the user to freeze the row headers alone on scrolling the horizontal scroll bar.
Default Value: false
Example:
<ej-pivotgrid [frozenHeaderSettings.enableFrozenRowHeaders]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}frozenHeaderSettings.enableFrozenColumnHeaders boolean
Allows the user to freeze the column headers alone on scrolling the vertical scroll bar.
Default Value: false
Example:
<ej-pivotgrid [frozenHeaderSettings.enableFrozenColumnHeaders]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}frozenHeaderSettings.enableFrozenHeaders boolean
Allows the user to freeze both the row headers and column headers on scrolling.
Default Value: false
Example:
<ej-pivotgrid [frozenHeaderSettings.enableFrozenHeaders]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}frozenHeaderSettings.scrollerSize number
Allows user to set the size of the scrollbar (horizontal and vertical) visible in PivotGrid.
Default Value: 18
Example:
<ej-pivotgrid [frozenHeaderSettings.scrollerSize]=18>
</ej-pivotgrid>export class PivotGridComponent {
//..
}headerSettings object
Allows user to display header name in PivotGrid control.
Default Value: {}
Example:
<ej-pivotgrid [headerSettings]="headerSettings">
</ej-pivotgrid>export class PivotGridComponent {
public headerSettings;
constructor()
{
this.headerSettings = headerSettings;
}
}headerSettings.showRowItems boolean
Allows user to enable/disable row header names in PivotGrid control.
Default Value: false
Example:
<ej-pivotgrid [headerSettings.showRowItems]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}headerSettings.showColumnItems boolean
Allows user to enable/disable column header names in PivotGrid control.
Default Value: false
Example:
<ej-pivotgrid [headerSettings.showColumnItems]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}showUniqueNameOnPivotButton boolean
Allows user to show appropriate unique name on Pivot button.
Note: This is only applicable for OLAP datasource.
Default Value: false
Example:
<ej-pivotgrid [showUniqueNameOnPivotButton]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}customObject object
Object utilized to pass additional information between client-end and service-end on operating the control in server mode.
Default Value: null
Example:
<ej-pivotgrid [customObject]="customObject">
</ej-pivotgrid>export class PivotGridComponent {
public customObject;
constructor()
{
this.customObject = { Language: "en-US" };
}
}collapsedMembers object
Allows the user to collapsed the specified members in each field by default.
Default Value: null
Example:
<ej-pivotgrid [collapsedMembers]="collapsedMembers">
</ej-pivotgrid>export class PivotGridComponent {
public collapsedMembers;
constructor()
{
this.collapsedMembers = { Country: ["Canada", "France"] };
}
}enableCellContext boolean
Allows the user to access each cell on mouse right-click.
Default Value: false
Example:
<ej-pivotgrid [enableCellContext]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}enableCellSelection boolean
Enables the cell selection for a specific range of value cells.
Default Value: false
Example:
<ej-pivotgrid [enableCellSelection]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}enableDrillThrough boolean
Enables the Drill-Through feature which retrieves the raw items that are used to create the specific cell in PivotGrid.
Default Value: false
Example:
<ej-pivotgrid [enableDrillThrough]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}enableCellDoubleClick boolean
Allows user to get the cell details in JSON format on double clicking the cell.
Default Value: false
Example:
<ej-pivotgrid [enableCellDoubleClick]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}enableCellEditing boolean
Allows user to edit the value cells for write-back support in PivotGrid. This is applicable only for server-mode.
Default Value: false
Example:
<ej-pivotgrid [enableCellEditing]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}enableCollapseByDefault boolean
Collapses the Pivot items along rows and columns by default. It works only for relational data source.
Default Value: false
Example:
<ej-pivotgrid [enableCollapseByDefault]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}enableColumnGrandTotal boolean
Enables/Disables the display of grand total for all the columns.
Default Value: true
Example:
<ej-pivotgrid [enableColumnGrandTotal]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}enableConditionalFormatting boolean
Allows the user to format a specific set of cells based on the condition.
Default Value: false
Example:
<ej-pivotgrid [enableConditionalFormatting]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}enableAdvancedFilter boolean
Enables the advanced filtering options Value Filtering, Label Filtering and Sorting for each fields in server mode.
Default Value: false
Example:
<ej-pivotgrid [enableAdvancedFilter]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}enableDeferUpdate boolean
Allows the user to refresh the control on-demand and not during every UI operation.
Default Value: false
Example:
<ej-pivotgrid [enableDeferUpdate]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}enableGroupingBar boolean
Enables the display of GroupingBar allowing you to filter, sort and remove fields obtained from datasource.
Default Value: false
Example:
<ej-pivotgrid [enableGroupingBar]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}enableMemberEditorPaging boolean
Enables/Disables paging in Member Editor for viewing the large count of members in pages.
Default Value: false
Example:
<ej-pivotgrid [enableMemberEditorPaging]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}memberEditorPageSize number
Allows the user to set the number of members to be displayed in each page of Member Editor on applying paging in it.
Default Value: 100
Example:
<ej-pivotgrid [memberEditorPageSize]=50>
</ej-pivotgrid>export class PivotGridComponent {
//..
}enableMemberEditorSorting boolean
Enables/Disables sorting option in member editor dialog for the members of the respective field.
Default Value: false
Example:
<ej-pivotgrid [enableMemberEditorSorting]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}enableGrandTotal boolean
Enables/Disables the display of grand total for rows and columns.
Default Value: true
Example:
<ej-pivotgrid [enableGrandTotal]="false">
</ej-pivotgrid>export class PivotGridComponent {
//..
}enableJSONRendering boolean
Allows the user to load PivotGrid using JSON data.
Default Value: false
Example:
<ej-pivotgrid [enableJSONRendering]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}enablePivotFieldList boolean
Enables rendering of PivotGrid widget along with the PivotTable Field List, which allows UI operations.
Default Value: true
Example:
<ej-pivotgrid [enablePivotFieldList]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}enableRowGrandTotal boolean
Enables the display of grand total for all the rows.
Default Value: true
Example:
<ej-pivotgrid [enableRowGrandTotal]="false">
</ej-pivotgrid>export class PivotGridComponent {
//..
}enableRTL boolean
Allows the user to view layout of the PivotGrid from right to left.
Default Value: false
Example:
<ej-pivotgrid [enableRTL]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}enableToolTip boolean
Allows the user to enable ToolTip option.
Default Value: false
Example:
<ej-pivotgrid [enableToolTip]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}enableToolTipAnimation boolean
Allows the user to enable the animation effects in tooltip.
Default Value: false
Example:
<ej-pivotgrid [enableToolTipAnimation]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}enableColumnResizing boolean
Allows the user to adjust the width of the columns dynamically within given widget size.
Default Value: false
Example:
<ej-pivotgrid [enableColumnResizing]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}resizeColumnsToFit boolean
Allows the user to fit the width of the column based on its maximum text width.
Default Value: false
Example:
<ej-pivotgrid [resizeColumnsToFit]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}enableContextMenu boolean
Allows the user to enable/disable the context menu of Pivot buttons in the PivotGrid.
Default Value: false
Example:
<ej-pivotgrid [enableContextMenu]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}enableVirtualScrolling boolean
Allows the user to view large amount of data through virtual scrolling.
Default Value: false
Example:
<ej-pivotgrid [enableVirtualScrolling]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}enablePaging boolean
Allows the user to view large amount of data by applying paging.
Default Value: false
Example:
<ej-pivotgrid [enablePaging]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}hyperlinkSettings object
Allows the user to configure hyperlink settings of PivotGrid control.
Default Value: {}
Example:
<ej-pivotgrid [hyperlinkSettings]="hyperlinkSettings">
</ej-pivotgrid>export class PivotGridComponent {
public hyperlinkSettings;
constructor()
{
this.hyperlinkSettings = hyperlinkSettings;
}
}hyperlinkSettings.enableColumnHeaderHyperlink boolean
Allows the user to enable/disable hyperlink for column header.
Default Value: false
Example:
<ej-pivotgrid [hyperlinkSettings.enableColumnHeaderHyperlink]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}hyperlinkSettings.enableRowHeaderHyperlink boolean
Allows the user to enable/disable hyperlink for row header.
Default Value: false
Example:
<ej-pivotgrid [hyperlinkSettings.enableRowHeaderHyperlink]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}hyperlinkSettings.enableSummaryCellHyperlink boolean
Allows the user to enable/disable hyperlink for summary cells.
Default Value: false
Example:
<ej-pivotgrid [hyperlinkSettings.enableSummaryCellHyperlink]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}hyperlinkSettings.enableValueCellHyperlink boolean
Allows the user to enable/disable hyperlink for value cells.
Default Value: false
Example:
<ej-pivotgrid [hyperlinkSettings.enableValueCellHyperlink]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}isResponsive boolean
Allows the user to enable PivotGrid’s responsiveness in the browser layout.
Default Value: false
Example:
<ej-pivotgrid [isResponsive]="true">
</ej-pivotgrid>export class PivotGridComponent {
//..
}jsonRecords string
Contains the serialized JSON string which renders PivotGrid.
Default Value: “”
Example:
<ej-pivotgrid [jsonRecords]="jsonRecords">
</ej-pivotgrid>export class PivotGridComponent {
public jsonRecords;
constructor()
{
this.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:
<ej-pivotgrid [layout]="layout">
</ej-pivotgrid>export class PivotGridComponent {
public layout;
constructor()
{
this.layout = ej.PivotGrid.Layout.NoSummaries;
}
}locale string
Allows the user to set the localized language for the widget.
Default Value: “en-US”
Example:
<ej-pivotgrid [locale]="en-US">
</ej-pivotgrid>export class PivotGridComponent {
//..
}operationalMode enum
Sets the mode for the PivotGrid widget for binding data source either in 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:
<ej-pivotgrid [operationalMode]="operationalMode">
</ej-pivotgrid>export class PivotGridComponent {
public operationalMode;
constructor()
{
this.operationalMode = ej.Pivot.OperationalMode.ServerMode;
}
}Methods
exportPivotGrid()
Exports the PivotGrid to the specified format.
Example:
export class PivotGridComponent {
ngAfterViewInit(){
let gridObj = $('.e-pivotgrid').data('ejPivotGrid');
gridObj.exportPivotGrid(ej.PivotGrid.ExportOptions.Excel);
}
}refreshPagedPivotGrid()
This function re-renders the PivotGrid on clicking the navigation buttons on PivotPager.
Example:
export class PivotGridComponent {
ngAfterViewInit(){
let gridObj = $('.e-pivotgrid').data('ejPivotGrid');
gridObj.refreshPagedPivotGrid("series", 2);
}
}refreshPivotGrid()
This function refreshes the PivotGrid with modified data input in client-mode.
Example:
export class PivotGridComponent {
ngAfterViewInit(){
let gridObj = $('.e-pivotgrid').data('ejPivotGrid');
gridObj.refreshPivotGrid();
}
}refreshControl()
This function re-renders the control with the report available at that instant.
Example:
export class PivotGridComponent {
ngAfterViewInit(){
let gridObj = $('.e-pivotgrid').data('ejPivotGrid');
gridObj.model.dataSource = newDataSource;
gridObj.refreshControl();
}
}destroy()
This function Destroy the PivotGrid widget all events bound using this._on will be unbind automatically and bring the control to pre-init state.
Example:
export class PivotGridComponent {
ngAfterViewInit(){
let gridObj = $('.e-pivotgrid').data('ejPivotGrid');
gridObj.destroy();
}
}calculateCellWidths()
This function returns the height of all rows and width each and every column.
Returns:
object
Example:
export class PivotGridComponent {
ngAfterViewInit(){
let gridObj = $('.e-pivotgrid').data('ejPivotGrid');
let gridDimensions = gridObj.calculateCellWidths();
}
}openConditionalFormattingDialog()
This function creates the conditional formatting dialog to apply conditional formatting for PivotGrid control.
Example:
export class PivotGridComponent {
ngAfterViewInit(){
let gridObj = $('.e-pivotgrid').data('ejPivotGrid');
gridObj.openConditionalFormattingDialog();
}
}saveReport()
This function saves the current report to the database/local storage.
Example:
export class PivotGridComponent {
ngAfterViewInit(){
let gridObj = $('.e-pivotgrid').data('ejPivotGrid');
let storageOption = "local"; //it takes the string value "local" for local storage.
let url = "";//for local it is not required.
gridObj.saveReport("reportName", storageOption, url);
}
}loadReport()
This function loads the specified report from the database/local storage.
Example:
export class PivotGridComponent {
ngAfterViewInit(){
let gridObj = $('.e-pivotgrid').data('ejPivotGrid');
let storageOption = "local"; //it takes the string value "local" for loading a report from local storage.
let url = "";//for local it is not required.
gridObj.loadReport("reportName", storageOption, url);
}
}excelLikeLayout()
This function reconstructs the JSON data formed for rendering PivotGrid in excel-like layout format.
Example:
export class PivotGridComponent {
ngAfterViewInit(){
let gridObj = $('.e-pivotgrid').data('ejPivotGrid');
gridObj.excelLikeLayout(JSONObjectArray);
}
}getJSONRecords()
Returns the JSON records formed to render the control.
Returns:
array
Example:
export class PivotGridComponent {
ngAfterViewInit(){
let gridObj = $('.e-pivotgrid').data('ejPivotGrid');
let jsonRecords = gridObj.getJSONRecords();
}
}setJSONRecords()
Sets the JSON records formed to render the control.
Example:
export class PivotGridComponent {
ngAfterViewInit(){
let gridObj = $('.e-pivotgrid').data('ejPivotGrid');
gridObj.setJSONRecords(jsonRecords);
}
}refreshFieldCaption()
This function allows user to change the caption of the Pivot Item (name displayed in UI) on-demand for relational datasource in client-mode.
Example:
export class PivotGridComponent {
ngAfterViewInit(){
let gridObj = $('.e-pivotgrid').data('ejPivotGrid');
gridObj.refreshFieldCaption( "name", "caption", "axisClassName");
}
}renderControlFromJSON()
This function receives the JSON formatted datasource to render the PivotGrid control.
Example:
export class PivotGridComponent {
ngAfterViewInit(){
let gridObj = $('.e-pivotgrid').data('ejPivotGrid');
gridObj.renderControlFromJSON({ this.getJSONRecords() });
}
}Events
beforePivotEnginePopulate
Triggers before Pivot Engine starts to populate.
| Event Parameters | ||
|---|---|---|
| Name | Type | Description |
| pivotGridObject | object | returns the PivotGrid object |
Example:
<ej-pivotgrid (beforePivotEnginePopulate)="beforePivotEnginePopulate($event)">
</ej-pivotgrid>export class PivotGridComponent {
beforePivotEnginePopulate(args){
//Enter your code here.
}
}cellDoubleClick
Triggers when double click action is performed over a cell.
| Event Parameters | ||
|---|---|---|
| Name | Type | Description |
| selectedData | array | returns the JSON details of the double clicked cell. |
| customObject | object | returns the custom object bound with PivotGrid control. |
| element | object | returns the HTML element of PivotGrid control. |
Example:
<ej-pivotgrid (cellDoubleClick)="cellDoubleClick($event)">
</ej-pivotgrid>export class PivotGridComponent {
cellDoubleClick(args){
//Enter your code here.
}
}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:
<ej-pivotgrid (cellContext)="cellContext($event)">
</ej-pivotgrid>export class PivotGridComponent {
cellContext(args){
//Enter your code here.
}
}cellSelection
Triggers when a specific range of value cells are 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:
<ej-pivotgrid (cellSelection)="cellSelection($event)">
</ej-pivotgrid>export class PivotGridComponent {
cellSelection(args){
//Enter your code here.
}
}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:
<ej-pivotgrid (columnHeaderHyperlinkClick)="columnHeaderHyperlinkClick($event)">
</ej-pivotgrid>export class PivotGridComponent {
columnHeaderHyperlinkClick(args){
//Enter your code here.
}
}drillSuccess
Triggers after performing drill operation in PivotGrid.
| Event Parameters | ||
|---|---|---|
| Name | Type | Description |
| args | object | returns the HTML element of the control. |
Example:
<ej-pivotgrid (drillSuccess)="drillSuccess($event)">
</ej-pivotgrid>export class PivotGridComponent {
drillSuccess(args){
//Enter your code here.
}
}drillThrough
Triggers while clicking “OK” button 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:
<ej-pivotgrid (drillThrough)="drillThrough($event)">
</ej-pivotgrid>export class PivotGridComponent {
drillThrough(args){
//Enter your code here.
}
}load
Triggers when 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:
<ej-pivotgrid (load)="load($event)">
</ej-pivotgrid>export class PivotGridComponent {
load(args){
//Enter your code here.
}
}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:
<ej-pivotgrid (renderComplete)="renderComplete($event)">
</ej-pivotgrid>export class PivotGridComponent {
renderComplete(args){
//Enter your code here.
}
}renderFailure
Triggers when any error occurred during 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:
<ej-pivotgrid (renderFailure)="renderFailure($event)">
</ej-pivotgrid>export class PivotGridComponent {
renderFailure(args){
//Enter your code here.
}
}renderSuccess
Triggers when PivotGrid successfully reaches 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:
<ej-pivotgrid (renderSuccess)="renderSuccess($event)">
</ej-pivotgrid>export class PivotGridComponent {
renderSuccess(args){
//Enter your code here.
}
}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:
<ej-pivotgrid (rowHeaderHyperlinkClick)="rowHeaderHyperlinkClick($event)">
</ej-pivotgrid>export class PivotGridComponent {
rowHeaderHyperlinkClick(args){
//Enter your code here.
}
}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:
<ej-pivotgrid (summaryCellHyperlinkClick)="summaryCellHyperlinkClick($event)">
</ej-pivotgrid>export class PivotGridComponent {
summaryCellHyperlinkClick(args){
//Enter your code here.
}
}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:
<ej-pivotgrid (valueCellHyperlinkClick)="valueCellHyperlinkClick($event)">
</ej-pivotgrid>export class PivotGridComponent {
valueCellHyperlinkClick(args){
//Enter your code here.
}
}saveReport
Triggers before saving the current report to database.
| Event Parameters | ||
|---|---|---|
| Name | Type | Description |
| report | object | returns the report to be stored in database. |
Example:
<ej-pivotgrid (saveReport)="saveReport($event)">
</ej-pivotgrid>export class PivotGridComponent {
saveReport(args){
//Enter your code here.
}
}loadReport
Triggers before loading a report from 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:
<ej-pivotgrid (loadReport)="loadReport($event)">
</ej-pivotgrid>export class PivotGridComponent {
loadReport(args){
//Enter your code here.
}
}beforeExport
Triggers before performing exporting in 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:
<ej-pivotgrid (beforeExport)="beforeExport($event)">
</ej-pivotgrid>export class PivotGridComponent {
beforeExport(args){
//Enter your code here.
}
}cellEdit
Triggers before editing the cells.
| Event Parameters | ||
|---|---|---|
| Name | Type | Description |
| editCellsInfo | array | contains the array of cells selected for editing. |
Example:
<ej-pivotgrid (cellEdit)="cellEdit($event)">
</ej-pivotgrid>export class PivotGridComponent {
cellEdit(args){
//Enter your code here.
}
}