PivotGrid

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

  • html
  • <ej-pivotgrid ></ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [analysisMode]="analysisMode">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid cssClass="gradient-lime">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
        //..
     }

    pivotTableFieldListID string

    Connects the PivotSchemaDesigner with the specified ID to the PivotGrid Control.

    Default Value: “”

    Example:

  • html
  • <ej-pivotgrid pivotTableFieldListID="pivotTableFieldListID">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
        //..
     }

    dataSource object

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

    Default Value: {}

    Example:

  • html
  • <ej-pivotgrid [dataSource]="dataSource">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.columns]="columns">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.columns]="columns">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.columns]="columns">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.columns]="columns">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.columns]="columns">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.columns]="columns">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.columns]="columns">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.columns]="columns">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.columns]="columns">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.columns]="columns">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.columns]="columns">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.columns]="columns">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.columns]="columns">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.columns]="columns">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.columns]="columns">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.columns]="columns">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.columns]="columns">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.columns]="columns">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.columns]="columns">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.columns]="columns">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.columns]="columns">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.columns]="columns">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.columns]="columns">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.rows]="rows">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.rows]="rows">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.rows]="rows">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.rows]="rows">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.rows]="rows">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.rows]="rows">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.rows]="rows">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.rows]="rows">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.rows]="rows">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.rows]="rows">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.rows]="rows">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.rows]="rows">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.rows]="rows">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.rows]="rows">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.rows]="rows">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.rows]="rows">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.rows]="rows">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.rows]="rows">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.rows]="rows">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.rows]="rows">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.rows]="rows">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.rows]="rows">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.rows]="rows">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.values]="values">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.values]="values">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.values]="values">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.values]="values">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.values]="values">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.values]="values">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.values]="values">
        </ej-pivotgrid>
  • ts
  • 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.
  • html
  • <ej-pivotgrid [dataSource.values]="values">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.values]="values">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.values]="values">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.values]="values">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.values]="values">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.filters]="filters">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.filters]="filters">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.filters]="filters">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
        
        public  filters;
    
            constructor()
            {
              this.filters = [{ fieldCaption : "MyFieldCaption" }]; 
            }
     }

    dataSource.filters.filterItems object

    Applies filter to the field members.

    Default Value: null

    Example:

  • html
  • <ej-pivotgrid [dataSource.filters]="filters">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.filters]="filters">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.filters]="filters">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid dataSource.cube="Adventure Works">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid dataSource.sourceInfo="Provider Mondrian">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid dataSource.providerName="mondrian">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
       //..
     }

    dataSource.data object

    Provides the raw data source for the PivotGrid.

    Default Value: null

    Example:

  • html
  • <ej-pivotgrid [dataSource.data]="data">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid dataSource.catalog="Adventure Works DW 2008 SE">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.enableAdvancedFilter]="true">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
        //..
     }

    dataSource.reportName string

    Sets a name to the report bound to the control.

    Default Value: “”

    Example:

  • html
  • <ej-pivotgrid dataSource.reportName="Default Report">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.pagerOptions]="pagerOptions">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.pagerOptions.categoricalPageSize]=10>
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.pagerOptions.seriesPageSize]=5>
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.pagerOptions.categoricalCurrentPage]=3>
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [dataSource.pagerOptions.seriesCurrentPage]=7>
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
       //..
     }

    valueSortSettings object

    Holds the necessary properties for value sorting.

    Note: This is applicable for Relational datasource only.

    Default Value: {}

    Example:

  • html
  • <ej-pivotgrid [valueSortSettings]="valueSortSettings">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid valueSortSettings.headerText="Bike##FY 2005##Amount">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid valueSortSettings.headerDelimiters="##">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [valueSortSettings.sortOrder]="sortOrder">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [frozenHeaderSettings]="frozenHeaderSettings">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [frozenHeaderSettings.enableFrozenRowHeaders]="true">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [frozenHeaderSettings.enableFrozenColumnHeaders]="true">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
       //..
     }

    frozenHeaderSettings.enableFrozenHeaders boolean

    Allows the user to freeze both the row headers and column headers on scrolling.

    Default Value: false

    Example:

  • html
  • <ej-pivotgrid [frozenHeaderSettings.enableFrozenHeaders]="true">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [frozenHeaderSettings.scrollerSize]=18>
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
       //..
     }

    headerSettings object

    Allows user to display header name in PivotGrid control.

    Default Value: {}

    Example:

  • html
  • <ej-pivotgrid [headerSettings]="headerSettings">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [headerSettings.showRowItems]="true">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
      //..
     }

    headerSettings.showColumnItems boolean

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

    Default Value: false

    Example:

  • html
  • <ej-pivotgrid [headerSettings.showColumnItems]="true">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [showUniqueNameOnPivotButton]="true">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [customObject]="customObject">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [collapsedMembers]="collapsedMembers">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [enableCellContext]="true">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
      //..
     }

    enableCellSelection boolean

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

    Default Value: false

    Example:

  • html
  • <ej-pivotgrid [enableCellSelection]="true">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [enableDrillThrough]="true">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
      //..
     }

    enableCellDoubleClick boolean

    Allows user to get the cell details in JSON format on double clicking the cell.

    Default Value: false

    Example:

  • html
  • <ej-pivotgrid [enableCellDoubleClick]="true">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [enableCellEditing]="true">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [enableCollapseByDefault]="true">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
      //..
     }

    enableColumnGrandTotal boolean

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

    Default Value: true

    Example:

  • html
  • <ej-pivotgrid [enableColumnGrandTotal]="true">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
      //..
     }

    enableConditionalFormatting boolean

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

    Default Value: false

    Example:

  • html
  • <ej-pivotgrid [enableConditionalFormatting]="true">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [enableAdvancedFilter]="true">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
      //..
     }

    enableDeferUpdate boolean

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

    Default Value: false

    Example:

  • html
  • <ej-pivotgrid [enableDeferUpdate]="true">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [enableGroupingBar]="true">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
      //..
     }

    enableMemberEditorPaging boolean

    Enables/Disables paging in Member Editor for viewing the large count of members in pages.

    Default Value: false

    Example:

  • html
  • <ej-pivotgrid [enableMemberEditorPaging]="true">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [memberEditorPageSize]=50>
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
      //..
     }

    enableMemberEditorSorting boolean

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

    Default Value: false

    Example:

  • html
  • <ej-pivotgrid [enableMemberEditorSorting]="true">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
      //..
     }

    enableGrandTotal boolean

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

    Default Value: true

    Example:

  • html
  • <ej-pivotgrid [enableGrandTotal]="false">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
      //..
     }

    enableJSONRendering boolean

    Allows the user to load PivotGrid using JSON data.

    Default Value: false

    Example:

  • html
  • <ej-pivotgrid [enableJSONRendering]="true">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
      //..
     }

    enablePivotFieldList boolean

    Enables rendering of PivotGrid widget along with the PivotTable Field List, which allows UI operations.

    Default Value: true

    Example:

  • html
  • <ej-pivotgrid [enablePivotFieldList]="true">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
      //..
     }

    enableRowGrandTotal boolean

    Enables the display of grand total for all the rows.

    Default Value: true

    Example:

  • html
  • <ej-pivotgrid [enableRowGrandTotal]="false">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
      //..
     }

    enableRTL boolean

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

    Default Value: false

    Example:

  • html
  • <ej-pivotgrid [enableRTL]="true">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
      //..
     }

    enableToolTip boolean

    Allows the user to enable ToolTip option.

    Default Value: false

    Example:

  • html
  • <ej-pivotgrid [enableToolTip]="true">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
      //..
     }

    enableToolTipAnimation boolean

    Allows the user to enable the animation effects in tooltip.

    Default Value: false

    Example:

  • html
  • <ej-pivotgrid [enableToolTipAnimation]="true">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
      //..
     }

    enableColumnResizing boolean

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

    Default Value: false

    Example:

  • html
  • <ej-pivotgrid [enableColumnResizing]="true">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [resizeColumnsToFit]="true">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
      //..
     }

    enableContextMenu boolean

    Allows the user to enable/disable the context menu of Pivot buttons in the PivotGrid.

    Default Value: false

    Example:

  • html
  • <ej-pivotgrid [enableContextMenu]="true">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
      //..
     }

    enableVirtualScrolling boolean

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

    Default Value: false

    Example:

  • html
  • <ej-pivotgrid [enableVirtualScrolling]="true">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
      //..
     }

    enablePaging boolean

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

    Default Value: false

    Example:

  • html
  • <ej-pivotgrid [enablePaging]="true">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
      //..
     }

    hyperlinkSettings object

    Allows the user to configure hyperlink settings of PivotGrid control.

    Default Value: {}

    Example:

  • html
  • <ej-pivotgrid [hyperlinkSettings]="hyperlinkSettings">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
        
        public  hyperlinkSettings;
    
            constructor()
            {
              this.hyperlinkSettings = hyperlinkSettings; 
            }
     }

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

    Default Value: false

    Example:

  • html
  • <ej-pivotgrid [hyperlinkSettings.enableColumnHeaderHyperlink]="true">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
        //..
     }

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

    Default Value: false

    Example:

  • html
  • <ej-pivotgrid [hyperlinkSettings.enableRowHeaderHyperlink]="true">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
        //..
     }

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

    Default Value: false

    Example:

  • html
  • <ej-pivotgrid [hyperlinkSettings.enableSummaryCellHyperlink]="true">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
        //..
     }

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

    Default Value: false

    Example:

  • html
  • <ej-pivotgrid [hyperlinkSettings.enableValueCellHyperlink]="true">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
        //..
     }

    isResponsive boolean

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

    Default Value: false

    Example:

  • html
  • <ej-pivotgrid [isResponsive]="true">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
        //..
     }

    jsonRecords string

    Contains the serialized JSON string which renders PivotGrid.

    Default Value: “”

    Example:

  • html
  • <ej-pivotgrid [jsonRecords]="jsonRecords">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [layout]="layout">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [locale]="en-US">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid [operationalMode]="operationalMode">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
        
        public  operationalMode;
    
            constructor()
            {
              this.operationalMode = ej.Pivot.OperationalMode.ServerMode; 
            }
     }

    Methods

    exportPivotGrid()

    Exports the PivotGrid to the specified format.

    Example:

  • ts
  • 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:

  • ts
  • 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:

  • ts
  • 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:

  • ts
  • 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:

  • ts
  • 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:

  • ts
  • 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:

  • ts
  • 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:

  • ts
  • 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:

  • ts
  • 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:

  • ts
  • 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:

  • ts
  • 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:

  • ts
  • 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:

  • ts
  • 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:

  • ts
  • 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:

  • html
  • <ej-pivotgrid (beforePivotEnginePopulate)="beforePivotEnginePopulate($event)">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid (cellDoubleClick)="cellDoubleClick($event)">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid (cellContext)="cellContext($event)">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid (cellSelection)="cellSelection($event)">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid (columnHeaderHyperlinkClick)="columnHeaderHyperlinkClick($event)">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid (drillSuccess)="drillSuccess($event)">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid (drillThrough)="drillThrough($event)">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid (load)="load($event)">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid (renderComplete)="renderComplete($event)">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid (renderFailure)="renderFailure($event)">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid (renderSuccess)="renderSuccess($event)">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid (rowHeaderHyperlinkClick)="rowHeaderHyperlinkClick($event)">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid (summaryCellHyperlinkClick)="summaryCellHyperlinkClick($event)">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid (valueCellHyperlinkClick)="valueCellHyperlinkClick($event)">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid (saveReport)="saveReport($event)">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid (loadReport)="loadReport($event)">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid (beforeExport)="beforeExport($event)">
        </ej-pivotgrid>
  • ts
  • 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:

  • html
  • <ej-pivotgrid (cellEdit)="cellEdit($event)">
        </ej-pivotgrid>
  • ts
  • export class PivotGridComponent {
    
        cellEdit(args){
             //Enter your code here.
        }
    }