Tooltip for aggregate footer in Angular Grid

[Puneet]

Hi,

I am using clipMode = 'EllipsisWithTooltip' in my angular grid but it misbehaves in case of aggregate footer.

I tried to recreate the problem by using your stackblitz example in below link.

I have done following modification in this example and it doesn't show tooltip on footer even when text is more than column width.

Also the footer is not showing ellipsis(...) in case of text length more than column width.

Can you please guide how I can get the desired behaviour from grid ?

Regards,

Puneet

Example Link : https://ej2.syncfusion.com/angular/demos/#/material/grid/aggregate-default

Modification in example:

<div class="control-section">

    <ejs-grid [dataSource]="data" [allowPaging]="true" [pageSettings]='pageOption' 

[

clipMode

]

=

"'EllipsisWithTooltip'"

>

        <e-columns>

            <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column>

            <e-column field='Freight' headerText='Freight' 

width

=

'30'

 format='C2' textAlign='Right'></e-column>

            <e-column field='OrderDate' headerText='Order Date' width='150' format="yMd" textAlign='Right'></e-column>

            <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>

        </e-columns>

        <e-aggregates>

            <e-aggregate>

                <e-columns>

                    <e-column type="Sum" field="Freight" format="C2">

                        

<

ng-template

 #

footerTemplate

 

let-data

>

{{data.Sum}}

</

ng-template

>

                    </e-column>

                </e-columns>

            </e-aggregate>

            <e-aggregate>

                <e-columns>

                    <e-column type="Average" field="Freight" format="C2">

                        <ng-template #footerTemplate let-data>Average: {{data.Average}}</ng-template>

                    </e-column>

                </e-columns>

            </e-aggregate>

        </e-aggregates>

    </ejs-grid>

</div>

[Sujith Kumar Rajkumar]

Hi Puneet, 

 

Greetings from Syncfusion support. 

 

The ‘EllipsisWithTooltip’ clip mode displays tooltip only for the overflowed cell content and not for aggregates. If you wish to display tooltip for aggregate then you can achieve it by rendering custom tooltip for the aggregate cell in the Grid’s dataBound event. This is demonstrated in the below code snippet, 

 

// Grid’s dataBound event function 

dataBound() { 

        // Get all the template aggregate cells 

        var aggregateTemplateCell = (this.gridObj.aggregateModule as any).footerRenderer.contentTable.querySelectorAll('.e-templatecell'); 

        var i = 0; 

        while (i < aggregateTemplateCell.length) { 

            // Initialize custom tooltip component 

            const tooltip: Tooltip = new Tooltip({ 

                // Aggregate template cell content is set as tooltip content 

                content: aggregateTemplateCell[i].innerText 

            }, aggregateTemplateCell[i]); 

            // Tooltip is then appended to the aggregate template cell 

            i++; 

        } 

} 

 

We have prepared a sample based on this for your reference which you can find below, 

 

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

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/how-to/custom-tool-tip-for-columns/ 

 

More details on the tooltip component can be checked in the below documentation link, 

 

Tooltip documentation: https://ej2.syncfusion.com/angular/documentation/tooltip/getting-started/ 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R 

[Nagendra Gupta]

Hi Sujith Kumar Rajkumar ,

As per your previous example my requirement is full fill but I have some new requirement that is mention below.

1) Tool tip show  when ellipsis mode activate.

2) I want this feature without template.

Regards

Nagendra Gupta

[Joseph Christ Nithin Issack]

Hi Nagendra,

  Thanks for your update.

   Before proceeding to the solution, we would like you to share the following information.

• Please explain your exact requirement in detail.
• Please share the video demo or screenshot of your requirement.

Please get back to us for further details.

Regards,

Joseph I.

[Nagendra Gupta]

Hi  Joseph Christ Nithin Issack,

I want tooltip in grid footer on which column have only triple dot.

I am also attaching screenshot zip file for better understand the requirement of mine.

Please find the attach file.

Regards

Nagendra Gupta

Attachment: screenshoot_dff9170d.zip

[Joseph Christ Nithin Issack]

Hi Nagendra,

  Thanks for your update.

   Currently we are validating the issue, we will provide further details on or before 4^th October, 2022. We appreciate your patience until then.

Regards,

Joseph I.

[Joseph Christ Nithin Issack]

Hi Nagendra,

  We are validating the feasibility of your query, we will provide further details on or before Oct 7th 2022. We appreciate your patience until then.

Regards,

Joseph I.

[Joseph Christ Nithin Issack]

Hi Nagendra,

  Thanks for your patience,

  Based on your query, you want to update the display the aggregate column like ellipsisWithTooltip, when the text overflows to the next line. Unfortunately we donot have the support for applying the clipmode to the aggregate columns. Hence we suggest you to use the autoFit columns or increase the width of the column so that the aggregate value will be displayed fully in the single line.

Please get back to us for further details.

Regards,

Joseph I.