0

I have a lightning-tree-grid on which I would like to have a hover on the first column. How do I pass the id of the record to a child component to show extra data of the record on mouseover?

Whenever I hover over any row I need to fetch that particular recordId and pass it to child component.(Using LWC)

HTML file

<template>
<div style="height: 500px;">
<template if:true={gridData}>
    <lightning-card title = 'Accounts With opportunities'>
     <lightning-tree-grid
        hide-checkbox-column="true"
        columns={gridColumns}
        data={gridData}
        key-field="Id"
        show-row-number-column="true"
        onmouseover={handleMouseOver}
        
    ></lightning-tree-grid>
    </lightning-card>
    
</template>
</div>
</template>

Js file

    import { LightningElement,wire,track, api } from 'lwc';
import getAccountsWithOpp from '@salesforce/apex/fetchData.getAccountsWithOpp';

export default class AccountGridView extends NavigationMixin( LightningElement ) {
    @track gridData=[];
   @api acc_rec_id;
    @wire(getAccountsWithOpp) results({data,error})
    {
        if(data){
            let tempAccList = []; 
        
        
        data.forEach((record) => {
            let tempOppList = [];
            let tempAccRec = Object.assign({}, record);  
            let tempOppRec = tempAccRec['Opportunities']
            if(tempOppRec)
            {
                tempOppRec.forEach((rec)=>{
                    let opp = Object.assign({},rec);
                    opp.AccUrl = '/' + opp.Id;
                    tempOppList.push(opp);
                    //console.log(opp);
                })
                tempAccRec._children = tempOppList;
            }
            else
            {
                tempAccRec._children = tempOppList;
            }
            tempAccRec.AccUrl = '/' + tempAccRec.Id;
            this.acc_rec_id = tempAccRec.Id;
            tempAccList.push(tempAccRec);
            
            //console.log(tempAccRec._children);
            
        });
        // console.log(tempAccList);
       this.gridData=tempAccList;
       console.log('ID gridData'+this.gridData.Id);

    }   
    else if(error){
        console.log(error);
    }
}
 gridColumns=[
    { label: 'Name',
    fieldName: 'AccUrl',
    type: 'url',
    typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'} 
},
    {
        label:'Phone',
        fieldName:'Phone',
        type:'Phone'
    },
    {
        label:'Industry',
        fieldName:'Industry',
        type:'text'
    },

  
]


handleMouseOver(event)
{
    const row = event.detail.row;
    console.log(JSON.stringify(event.currentTarget.dataset));
    
} 

}

In the above code the handleMouseOver method is returning just a empty '{}'.

1 Answer 1

0

Welcome to Salesforce Stack Exchange! The more detail you provide about what you've tried and the behavior you're seeing from what you've tried, the better we can help!

Generally, you can attach a function from your component's JS file to an event handler in your html template. So on some element in your HTML file, you can attach an onmousehover handler that calls a function in your JS file (and a corresponding handler for removing the popover.

<div data-id={item.recordId} onmouseover={showPopOver} onmouseleave={hidePopOver}></div>

Note that there are a few different mouse events you could use, and where you attach these and which events to use depend on your DOM structure and the specifics of how this should behave.

In your JS file, your event handlers can access an Event object that you can use to obtain information about where the event came from, for instance, your record ID could be stored as a data field on the element.

showPopOver(event) {
  // event.currentTarget.dataset.id should be your Id to do your lookup
}

Consider whether you expect this component to be used on mobile devices and how it should behave there if so.

2
  • They're trying to do this with a lightning-tree-grid, though.
    – sfdcfox
    Commented Dec 21, 2021 at 14:15
  • please find the above code and let me know if you have any solution for this
    – jerry123
    Commented Dec 22, 2021 at 5:12

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .