PivotGrid: Elements

28 Sep 20175 minutes to read

The PivotGrid control supports hyperlink option to link data for each individual cell. Hyperlink can be enabled separately for row header, column header, value and summary cells. Following are the respective properties:

Also hyperlink option provides separate events for row header, column header, value and summary cells as mentioned below.

<ej-pivotgrid [hyperlinkSettings]="hyperlinkSettings" (rowHeaderHyperlinkClick)="CellClickEvent($event)" (summaryCellHyperlinkClick)="CellClickEvent($event)"
    (valueCellHyperlinkClick)="CellClickEvent($event)" (columnHeaderHyperlinkClick)="CellClickEvent($event)">
    export class PivotGridComponent {
        public hyperlinkSettings;
        constructor() {
          this.hyperlinkSettings = hyperlinkSettings= {
            enableValueCellHyperlink: true,
            enableRowHeaderHyperlink: true,
            enableColumnHeaderHyperlink: true,
            enableSummaryCellHyperlink: true
        CellClickEvent() {
            alert("Cell click event is fired.");


You can select a particular range of value cells from PivotGrid and manipulate/display them. Cell selection is applicable only for value cells and you can enable this functionality by setting enableCellSelection property to true.

The cellSelection event would be triggered as soon as the selection process is over, that is, when the mouse left click is released. The event argument contains a collection of JSON records and header values, which contains information about the selected cells.

<ej-pivotgrid [enableCellSelection]="true" (cellSelection)="valueCellClick($event)">
export class PivotGridComponent {
    valueCellClick() {
       //This event lets you to perform required operation with the selected range of cells.
        let cellvalue = evt.JSONRecords;
        let rowheaders = evt.rowHeader;
        let colheaders = evt.columnHeader;

Cell Context

Cell context allows user to perform any custom operation on cell right-click. For example, you can create and display context menu on cell right-click.

Cell context is enabled by setting the enableCellContext property to true. The cellContext event would be raised as soon as right-click is done providing cell information through event argument.

<ej-pivotgrid [enableCellContext]="true" (cellContext)="cell_RightClick($event)">
export class PivotGridComponent {
    cell_RightClick() {
       //You can write your code here

Conditional Formatting

Conditional formatting in PivotGrid allows user to highlight particular cells with certain color, font-style, font-family etc. based on the condition they have met. Also the condition can be applied for certain Measure alone.

Conditional formatting is enabled by setting enableConditionalFormatting property to true and the formatting dialog is launched when “createConditionalDialog” method is invoked.

<ej-pivotgrid [enableConditionalFormatting]="true">
<input id="conFormat" ej-button size="normal" (click)="onConFormat($event)" value="Apply" text="Apply" />
export class PivotGridComponent {
    onConFormat(args) {
      let pivotGrid = $('.e-pivotgrid').data('ejPivotGrid');
      if (pivotGrid.model.enableConditionalFormatting) {


We can export the PivotGrid with highlighted particular cells along with its formatting styles.


The following border styles are not supported

  • Solid
  • Groove
  • Ridge


Border styles are not applicable.


The following border styles are alone supported

  • Dashed
  • Dotted
  • Double

Also border size is not supported.