Reactivity is dicreased by header's custom tooltip

[Mohamed BENNOUR]

Hi Team !

We already saw in our first try a low reactivity by using clipMode='EllipsisWithTooltip' so we set clipMode='Ellipsis' but for the header we've tried a solution from a thread : https://www.syncfusion.com/forums/141298/how-to-add-tooltip-on-e-column-header-of-ejs-grid

In the template:

(headerCellInfo)='headerCellInfo($event)'

and in the component:

headerCellInfo(args: any) {
    const toolcontent = args.cell.column.headerText;
    const tooltip: Tooltip = new Tooltip({
        content: toolcontent
    });
    tooltip.appendTo(args.node);
}

And now, when we use the filterBar or our custom input, the word appears after the filter renderer (the result of the filter is good).

1- Why does it take so many resources to render a tooltip in both case ?

Before that we've tried to add a material tooltip like this

<e-column
    [field]="column.field"
    [headerText]="column.headerName"
    [matTooltip]="column.headerName"

2- Why this doesn't work ?

Material has a really simple directive for Angular, how can we use it ?

3- Then we tried CDK overlay from material to create our custom tooltip and it doesn't work on the e-column, why ?

[Balaji Sekar]

Hi Mohamed, 

 

Thanks for contacting Syncfusion support. 

 

Query #1:  Why does it take so many resources to render a tooltip in both case ? 

We can show the tooltip on header and content of specific grid column using  customAttribute property. Here we have set the CustomAttributes for the columns need to get the tooltip. Then in the Tooltip render we have given the target as customAttributes class. This will allow the tooltip to render only on the specified column. 

 

For your reference, we have shared a code example and sample for more information. 

[app.component.html] 

<ejs-tooltip id='tooltip' target=".customcss" position="LeftTop"> 

    <ejs-grid #grid [dataSource]='data'(load)='load($event)' allowFiltering={true}> 

        <e-columns>            

            <e-column field='EmployeeID' headerText='Employee ID' width='125' textAlign='Right'></e-column> 

            <e-column field='FirstName' headerText='Name' [customAttributes]='customAttributes' width='120'></e-column> 

            <e-column field='Title' headerText='Title' width='170'></e-column> 

            <e-column field='HireDate' headerText='Hire Date' width='135' textAlign='Right' format='yMd'></e-column> 

            <e-column field='ReportsTo' headerText='Reports To' width='120' textAlign='Right'></e-column> 

        </e-columns> 

    </ejs-grid> 

</ejs-tooltip> 

 

[app.component.ts] 

 

    ngOnInit(): void { 

        this.data = employeeData; 

          this.customAttributes = {class: 'customcss'}; 

    } 

 

  load(args) { 

    this.grid.element.addEventListener("mouseover", function (args) {       

      if ( args.target.classList.contains("customcss")) { 

        var tooltip = document.getElementById('tooltip').ej2_instances[0]; 

        tooltip.content = args.target.innerText; 

      } 

    }); 

  } 

 

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

 

Query #2: when we use the filterBar or our custom input, the word appears after the filter renderer 

 

We have tried to reproduce the reported problem in the above sample but it is unsuccessful. If you facing same problem in your end please share more details to us that will help to validate further. 

 

Query #3:  Why this doesn't work ? 

 

Grid column wrapper is not support the material Tooltip that only you can see the problem in your application. 

 

Query #4:  Then we tried CDK overlay from material to create our custom tooltip and it doesn't work on the e-column, why ? 

 

Before proceeding further, we suspect that you want to bind the material tooltip on Grid. Please share your exact requirement to us that would help to validate further. 

 

Regards, 

Balaji Sekar.