Cell Tooltip - Actual value instead of Formatted Value

[Shreekumar]

Hi Team

I'm using Pivotview and Implemented Custom Cell-Edit.

Here's my HTML

<ejs-pivotview #pivotview id='PivotView' showFieldList='false' [editSettings]='editSettings'

 [dataSourceSettings]='dataSource' height='{{height}}' showGroupingBar='true' allowCalculatedField='true'

 (cellSelected)='cellSelected($event)' (drillThrough)="editCell($event)" [gridSettings]='gridSettings'

 showToolbar='true' [toolbar]='toolbarOptions' (toolbarRender)='beforeToolbarRender($event)'

showTooltip='true' (dataBound)='dataBound()' (paste)="paste($event)"

 allowConditionalFormatting='true' allowDeferLayoutUpdate='true' (created)='created()'

 allowExcelExport='true' (enginePopulated)='enginePopulated($event)' tooltipTemplate='<span>${value}</span'>

</ejs-pivotview>

Also, I'm using (dataBound) event to modify the format of Cell values. (Since cell support Actual Value & Formatted Value)

dataBound(): void {

  if (this.pivotGridObj.pivotValues) {

const data = this.pivotGridObj.dataSourceSettings.dataSource as IDataSet[];

      const rowsCount = this.pivotGridObj.pivotValues.length;

      const colsCount = this.pivotGridObj.pivotValues[0].length - 1;

      const displayPrecision = +this.ddlPrecision.value;

      for (let i = 0; i < rowsCount; i++) {

        for (let j = 1; j <= colsCount; j++) {

          const r = (this.pivotGridObj.pivotValues[i][j] as IAxisSet);

          if (!r.hasChild) {

  r.formattedText = (r.value / 10000).toString();

}

}

}

}

}

Here, with formatting cell display value will be changed.

Example: value = 2000

formattedText = 2000/100000 = 0.2

And based on Tooltip configuration, It shows 0.2 as value.

Is there any way I can show the Actual value (Bound value i.e. 2000) instead of Formatted Value (i.e. 0.2)?

[Sivamathi Natarajan]

Hi ShreeKumar, 

 

Thanks for contacting Syncfusion support. 

 

Kindly use the below code example to display the actual value in tooltip. Here we have created a tooltip with actual value in load event. 

 

Code Example:  

 load(args: any): void { 

    this.pivotGridObj.tooltip = new Tooltip({ 

      target: 'td.e-valuescontent', 

      width: 200, 

      mouseTrail: true, 

      showTipPointer: false, 

      enableRtl: this.pivotGridObj.enableRtl, 

      beforeOpen: function (args) { 

        args.element.classList.add('e-pivottooltipwrap'); 

      }, 

      beforeRender: function (args) { 

        var pivotGridObj = document.querySelector('.e-pivotview').ej2_instances[0]; 

        var colIndex = Number(args.target.getAttribute('aria-colindex')); 

        var rowIndex = Number(args.target.getAttribute('index')); 

        var cell = pivotGridObj.pivotValues[rowIndex][colIndex]; 

        pivotGridObj.tooltip.content = ''; 

        var len = 0; 

        if (pivotGridObj.dataSourceSettings.columns.length > 0 && cell) { 

          var pos = pivotGridObj.dataSourceSettings.values.length == 0 ? 0 : Number(Object.keys(pivotGridObj.engineModule.headerContent)[Object.keys(pivotGridObj.engineModule.headerContent).length - 1]); 

          len = pivotGridObj.dataSourceSettings.values.length > 1 ? pivotGridObj.pivotValues[pos][colIndex].valueSort.levelName.split('~~').length - 1 : pivotGridObj.pivotValues[pos][colIndex].valueSort.levelName.split('~~').length; 

        } 

        if (cell) { 

          var outer = '<div class="e-pivottooltip">'; 

          for (var i = 0; i < pivotGridObj.pivotValues[rowIndex][0].valueSort.levelName.split('~~').length && pivotGridObj.dataSourceSettings.rows.length > 0; i++) { 

            outer = outer + '<p class="e-tooltipheader">' + pivotGridObj.dataSourceSettings.rows[i].name + ' :</p>' + 

              '<p class="e-tooltipcontent">' + pivotGridObj.pivotValues[rowIndex][0].valueSort.levelName.split('~~')[i] + '</p></br>'; 

          } 

          for (var j = 0; j < len; j++) { 

            outer = outer + '<p class="e-tooltipheader">' + pivotGridObj.dataSourceSettings.columns[j].name + ' :</p>' + 

              '<p class="e-tooltipcontent">' + pivotGridObj.pivotValues[Number(Object.keys(pivotGridObj.engineModule.headerContent)[Object.keys(pivotGridObj.engineModule.headerContent).length - 1])][colIndex].valueSort.levelName.split('~~')[j] + '</p></br>'; 

          } 

          outer = outer + '<p class="e-tooltipheader">' + pivotGridObj.engineModule.fieldList[cell.actualText].caption + ':</p><p class="e-tooltipcontent">' + cell.actualValue + '</p></div>'; 

          pivotGridObj.tooltip.content = outer; 

        } else { 

          args.cancel = true; 

        } 

      } 

    }); 

    this.pivotGridObj.tooltip.appendTo(this.pivotGridObj.element); 

  }; 

 

 

Sample: https://stackblitz.com/edit/angular-2uvfvb-ieljq4?file=app.component.ts 

 

We hope the above sample meets your requirements. 

 

Regards, 

Sivamathi. 

[Shreekumar]

The following line giving error

 const pivotGridObj = document.querySelector('.e-pivotview').ej2_instances[0];

Property 'ej2_instances' does not exist on type 'Element'.

[Sivamathi Natarajan]

Hi ShreeKumar, 

 

Kindly use the below sample to display the actual value in tooltip. 

 

Sample: https://stackblitz.com/edit/angular-2uvfvb-zgjqjq?file=app.component.ts 

 

Please let us know if you have concern. 

 

Regards, 

Sivamathi. 

[Shreekumar]

Thanks for the reply. It is working as expected. 

But, my Context menu is not working on selection of Dropdown List. 

Here's my code.

<ejs-dropdownlist #ddlPrecision class="pivot-table-dropdown" id='ddlPrecision' [dataSource]='precision'

     [fields]='precisionFields' placeholder='Display Precision' (change)='onPrecisionChange($event)'>

</ejs-dropdownlist>

<ejs-pivotview #pivotview id='PivotView' [editSettings]='editSettings' [dataSourceSettings]='dataSource'

    [height]='height' showGroupingBar='true' allowCalculatedField='true' (cellSelected)='cellSelected($event)'

    (drillThrough)="editCell($event)" [gridSettings]='gridSettings' showToolbar='true'

    [toolbar]='toolbarOptions' (toolbarRender)='beforeToolbarRender($event)' [showTooltip]='false'

    (dataBound)='dataBound()' (paste)="paste($event)" allowConditionalFormatting='true'

    allowDeferLayoutUpdate='true' (created)='created()' allowExcelExport='true' [showFieldList]='false'

    (enginePopulated)='enginePopulated($event)' (load)='load($event)'>

</ejs-pivotview>

<ejs-contextmenu id='contextmenu' #contextmenu target='#PivotView_grid_content_table' [items]='menuItems'

   (beforeOpen)='onContextCreated()' (select)="lockUnlock($event)" (created)="initContextMenu()">

</ejs-contextmenu>

I'm handling tooltip based on Condition.

1] If dropdown selected value > 0 then I'm attaching tooltip to PivotView in Load() method

2] If dropdown selected value == 0 then returning without attaching tooltip.

But, on selection of dropdown value, my Context menu is not working.

onPrecisionChange(args: any) {

  this.pivotGridObj.showWaitingPopup();

  localStorage.setItem('precisionValue', args.value);

  this.pivotGridObj.refresh();

}

load(args: any): void {

    if (+this.ddlPrecision.value == 0) {

      return;

    }

    this.pivotGridObj.tooltip = new Tooltip({

      target: 'td.e-valuescontent',

      mouseTrail: true,

      showTipPointer: false,

      enableRtl: this.pivotGridObj.enableRtl,

      beforeOpen(o) {

        if (o.element) {

          o.element.classList.add('e-pivottooltipwrap');

        }

      },

      beforeRender(r) {

        const pivotGridObj = (document.querySelector('.e-pivotview') as any).ej2_instances[0];

        const colIndex = Number(r.target.getAttribute('aria-colindex'));

        const rowIndex = Number(r.target.getAttribute('index'));

        const cell = pivotGridObj.pivotValues[rowIndex][colIndex];

        pivotGridObj.tooltip.content = '';

        let len = 0;

        if (pivotGridObj.dataSourceSettings.columns.length > 0 && cell) {

          const pos = pivotGridObj.dataSourceSettings.values.length == 0 ? 0 :

            Number(Object.keys(pivotGridObj.engineModule.headerContent)[Object.keys(pivotGridObj.engineModule.headerContent).length - 1]);

          len = pivotGridObj.dataSourceSettings.values.length > 1 ?

            pivotGridObj.pivotValues[pos][colIndex].valueSort.levelName.split('~~').length - 1 :

            pivotGridObj.pivotValues[pos][colIndex].valueSort.levelName.split('~~').length;

        }

      

        if (cell && cell.formattedText !='') {

          let outer = '<div class="e-pivottooltip">';

          outer = outer + '<p class="e-tooltipcontent">' + cell.actualValue + '</p></div>';

          pivotGridObj.tooltip.content = outer;

        } else {

          r.cancel = true;

        }

      }

  });

  this.pivotGridObj.tooltip.appendTo(this.pivotGridObj.element);

}

// Context Menu Created.

onContextCreated(): void {

  this.contextmenu.enableItems(['Unlock', 'Lock'], true);

}

[Sivamathi Natarajan]

Hi ShreeKumar, 

 

Kindly use the below sample to add the custom menu in the pivot table. 

 

Code Example:  

 

 this.gridSettings = { 

      columnWidth: 140, 

      contextMenuItems: [{id: 'lock', text: 'lock', target: '#PivotView_grid_content_table'},{id: 'unlock',text: 'Unlock', target: '#PivotView_grid_content_table'}], 

    } as GridSettings; 

 

 

enginePopulated(): void { 

    this.pivotGridObj.grid.contextMenuClick = this.contextmenuClick.bind(this); 

    this.pivotGridObj.grid.contextMenuOpen = this.contextmenuOpen.bind(this); 

  } 

 

  contextmenuClick(): void { 

    console.log("contextmenuClick"); 

  } 

 

  contextmenuOpen(): void { 

    console.log("contextmenuOpen"); 

  } 

 

 

Meanwhile, we have prepared a sample for your reference. Please check the below sample link. 

 

Sample: https://stackblitz.com/edit/angular-2uvfvb-ylcfu9?file=app.component.ts 

 

Please let us know if you have concern. 

 

Regards, 

Sivamathi.