Add data to tooltip that is not part of the row / column information but is available when editing a cell

Good afternoon,

I'm wondering is it possible to add something to a tooltip that is outside of the column / row information? I'd like to add a field that is available when you double click to edit a cell, but don't see a way to access that data.

On a similar not, is it possible to style a cell differently based on data that is part of the edit when you are on a cell? For example if a piece of data is in that cell (or editable from that cell), I'd like to put a little icon on the cell to indicate there is something different in that data. It could also just be highlighting the cell.

Thank you!
Chuck


1 Reply 1 reply marked as answer

AP AngelinFaithSheeba PaulvannanRajadurai Syncfusion Team May 2, 2022 04:19 PM UTC

Hi Charles,


Please find the response below:

Query

Comments

 

Is it possible to add something to a tooltip that is outside of the column / row information? I'd like to add a field that is available when you double click to edit a cell, but don't see a way to access that data


Please create a custom tooltip in the pivot table's dataBound event to meet your requirements. You can add field information from the current cell's drill through data to the tooltip content. Please refer the below code example.

Code Example:

setToolTip(args) {

    // To get the required field cellSet while hovering.

    let cellSet;

    let dataIndex = Object.keys(cell.indexObject)[0];

    if (

      this.pivotObj.dataSourceSettings.dataSource &&

      this.pivotObj.dataSourceSettings.dataSource[dataIndex]

    ) {

      cellSet = this.pivotObj.dataSourceSettings.dataSource[dataIndex];

    }

    // Append the tooltip content.

      this.tooltip.content =

        '<div class=' +

        'e-pivottooltip' +

        '><p class=' +

        'e-tooltipheader' +

        '>' +

        this.pivotObj.localeObj.getConstant('row') +

        ':</p><p class=' +

        'e-tooltipcontent' +

        '>' +

        rowHeaders +

        '</p></br><p class=' +

        'e-tooltipheader' +

        '>' +

        this.pivotObj.localeObj.getConstant('column') +

        ':</p><p class=' +

        'e-tooltipcontent' +

        '>' +

        columnHeaders +

        '</p></br>' +

        (cell.actualText !== ''

          ? '<p class=' +

            'e-tooltipheader' +

            '>' +

            (this.pivotObj.dataType === 'olap'

              ? ''

              : this.pivotObj.localeObj.getConstant(aggregateType) +

                ' ' +

                this.pivotObj.localeObj.getConstant('of') +

                ' ') +

            (caption === 'Units Sold' ? 'Containers' : caption) +

            ':</p><p class=' +

            'e-tooltipcontent' +

            '>' +

            value +

            '</p></br>' +

            '<p class=' +

            'e-tooltipheader' +

            '>' +

            'Order_Source' +

            ':</p><p class=' +

            'e-tooltipcontent' +

            '>' +

            cellSet['Order_Source'] +

            '</p>' +

            '</div>'

          : '');

 

Meanwhile we have prepared a sample for your reference:

Sample: https://stackblitz.com/edit/angular-zc8xwc-xqepxb?file=app.component.ts

 

 Is it possible to style a cell differently based on data that is part of the edit when you are on a cell? For example if a piece of data is in that cell (or editable from that cell), I'd like to put a little icon on the cell to indicate there is something different in that data. It could also just be highlighting the cell.


Using Batch editing, you can differentiate the edited cell. By default, styles are applied to the edited cell. Please refer the code example:

Code Example:

this.editSettings = {

      allowEditing: true,

      allowAdding: true,

      allowDeleting: true,

      mode: 'Batch', // Here, we have enabled Batch editing.

    } as CellEditSettings;

        

Meanwhile, we have prepared a sample for your reference.                                         

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

Please see the document link below for more information on the "Auto Fit" option.

Document: Editing in Angular Pivot Table component - Syncfusion

Screenshot:


Please let us know if you have any concerns.


Regards,

Angelin Faith Sheeba.


Marked as answer
Loader.
Up arrow icon