1. Home
  2. Forum
  3. Angular - EJ 2
  4. keydown event taking time in case of custom tooltip

keydown event taking time in case of custom tooltip

Hi,

I am using syncfusion treegrid in my Angular 8 Project.

I have implemented custom tooltip on (queryCellInfo)   event as implemented below : 

queryCellInfo(args) {
        const tooltip: Tooltip = new Tooltip({
            content: '<b>test</b>: ok',
            animation: { open: { effect: 'FadeIn', duration: 0, delay: 0 },
                        close: { effect: 'FadeOut', duration: 0, delay: 0 }},
            openDelay: 0,
            closeDelay: 0,
        }, (args.cell as HTMLTableCellElement))
    }

I have around 500 records and 4 levels of childNodes, so when I push the arrowdown/arrowup button to select the next row, grid gets frozen for some seconds.

I implemented the same method with syncfusion example but increased records, same issue is there. Below is the link:

https://ej2.syncfusion.com/angular/demos/#/material/treegrid/row-hover

Can you please check what may be the reason for the misbehave of arrow keys ? 



6 Replies 1 reply marked as answer
PK Padmavathy Kamalanathan Syncfusion Team January 13, 2021 11:14 AM UTC

Hi Deepak, 
 
Thanks for contacting Syncfusion Forums. 
 
Query: keydown event taking time in case of custom tooltip 
 
We are able to reproduce the reported issue at our end. We are validating this problem with high priority and update you further details on or before 18th January 2021. 
 
In the meanwhile, kindly share us the below details which would be helpful for our validation, 
  1. Please share us complete Tree Grid rendering code or feature list that has been used.
  2. Syncfusion Package version details.
 
Regards, 
Padmavathy Kamalanathan           


MP Manivannan Padmanaban Syncfusion Team January 15, 2021 09:46 AM UTC

Hi Deepak, 

We appreciate your patience. 

On further validation, we could see that the reported issue will occur when we use the queryCellInfo event to render a custom tooltip that is not a feasible solution and that affects performance when we increase records. So, to overcome this, we recommend that you use the mouseover event to render the custom tooltip. Please refer to the example code below, 


<div class="control-section"> 
    <ejs-tooltip #tooltip id="tooltip" target=".e-headercell,.e-rowcell"> 
      <ejs-treegrid [dataSource]='data' height='350' childMapping='subtasks' [treeColumnIndex]='1' 
        (mouseover)="tooltipValue($event)"> 
        <e-columns> 
…………………………………. 
        </e-columns> 
      </ejs-treegrid> 
    </ejs-tooltip> 
  </div> 


import { TooltipComponent} from '@syncfusion/ej2-angular-popups'; 
………………. 
export class AppComponent { 
………… 
   @ViewChild('tooltip', {static:true}) tooltipObj: TooltipComponent;  
  ngOnInit(): void { 
    ………….. 
  } 
    tooltipValue(args) { 
     this.tooltipObj.content = "<b>test</b>: ok"; 
     this.tooltipObj.animation = { 
          open: { effect: "FadeIn", duration: 0, delay: 0 }, 
          close: { effect: "FadeOut", duration: 0, delay: 0 } 
        }; 
     this.tooltipObj.openDelay = 0; 
     this.tooltipObj.closeDelay = 0; 
     this.tooltipObj.mouseTrail = true; 
    } 
} 



Note: We've logged the UG task to modify the same in our help documentation and it will be updated online in our upcoming release.  

If you need further assistance, please get back to us. We're going to be happy to help you. 

Regards, 
Manivannan Padmanaban 


Marked as answer
DJ Deepak Jain January 16, 2021 12:56 PM UTC

Hi,

Thank You for your response.

In the mouseover method we get the mouseover event, but I need row data and column.field of particular cell to render dynamic content in tool tip.

Can you please tell how to achieve it ?

Best Regards,
Ankit Pathak

PK Padmavathy Kamalanathan Syncfusion Team January 18, 2021 01:32 PM UTC

Hi Deepak, 
 
Thanks for the update. 
 
Query: I need row data and column.field of particular cell to render dynamic content in tool tip 
 
The cell content of TreeGrid will be present in the argument of mouseover event in “args.target.innerText”. Please check the below code snippet and screenshot, 
  
  
    tooltipValue(args) { 
      let colData = args.target.innerText; // cell content 
      this.tooltipObj.content = colData; 
      --- 
    } 
 
  
Screenshot: 
  
 
  
Please check the below sample, 
 
If you need column name and row data in the mouseover event for any other purpose, we can get it by using the row and column index from the arguments of that event and Tree Grid’s methods getCurrentViewRecords and getColumnFieldNames as shown in the below example, 
 
Please check the below API help documentations, 
 
Kindly get back to us for further assistance. 
 
Regards, 
Padmavathy Kamalanathan           


DJ Deepak Jain January 21, 2021 01:48 PM UTC

Hi,

But I don't want to use particular data showing in the cell for tooltip.
for example in data I have value as name: 'Deepak', name_tooltiptext: 'This text to be shown in tooltip.'

how can I achieve this ?

PK Padmavathy Kamalanathan Syncfusion Team January 22, 2021 12:32 PM UTC

Hi Deepak, 
 
Thanks for the update. 
 
Query: name_tooltiptext: 'This text to be shown in tooltip.' 
 
From your query we suspect that you need to show some text along with the actual cell content. You can achieve this by concatenating your cell content with your custom content as shown in below code, 
 
 
  tooltipValue(args) { 
    let colData = args.target.innerText + "_" + "tooltip text";  
   // cell content + custom conent 
    this.tooltipObj.content = colData; 
  } 
 
Please check the below sample, 
 
If the above solution does not meet your requirement, kindly get back to us with the below details, 
  1. Please let us know name_tootiptext is another field value in your dataSource
  2. Also let us know whether you need to show tooltip text to all columns or any one particular column
  3. Tell us whether you need to show other field value in different field column
 
Regards, 
Padmavathy Kamalanathan 


Loader.
Up arrow icon