How to get row data of a focused row

Question

Hi,is there a way to access the row data of a gridrow, when i put my mouse over this  row?Something like <ejs-grid (onFocusedRowChanged)="onFocusedRowChanged($event)">
onFocusedRowChanged(e) {
    this.focusedRowData = e.row.data;
}Thanks for hel

Hemanthkumar S · Accepted Answer

Hi Matthias Wagner,Query: Is it possible to access the field-value of the
focused column? My workaround so far is to use (e.target as any).cellIndex to
get the column. But the problem here is, when i change the order of the columns
i have to change my code.Based on the details you provided, it's clear that you're
interested in retrieving the filed value of the currently focused column. Given
your recent update, we suggest utilizing the getColumnByIndex function
of the Grid. This function allows you to obtain column information by
specifying the index. For the index parameter, we advise using the data-colindex
of the cell. This approach ensures accurate retrieval of the focused column
information even if you rearrange the column order.For more information, please refer to the below code
example, screenshot, and sample.

[app.component.ts]
   
        const currentColumn = this.grid.getColumnByIndex(
          parseInt(targetElement.getAttribute('data-colindex'), 10)
        );
        let content = '';
        switch (currentColumn.field) {
          case 'wirkstoff':
            content = currentRowData['dosierung'] + ', ' + currentRowData['test'];
            break;
          case 'dosierung':
            break;
          case 'test':
            break;
          default:
            break;
        }
   
        let tooltip: Tooltip = new Tooltip({
          content: content, //'This is ' + currentRowData['test'], // tooltip content based on row data
        });

Sample: https://stackblitz.com/edit/angular-ivy-bjyyqe?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.tsPlease feel free to contact us if you require any further
assistance. We are always available and eager to help you in any way we can.Regards,Hemanth Kumar S

Hemanthkumar S · Answer

Hi Matthias Wagner,Greetings from Syncfusion support.Before we proceed with providing a solution, we need some
information to better understand your query. Please provide us with the
following details:
 Do
     you want to access the row data information when clicking the row or when
     hovering the mouse over the row?
 Share
     the complete code for rendering the Grid.
 Provide
     the version of the Syncfusion package that you are using.
 Sharing
     a video demonstration would greatly assist us in better understanding your
     query.
 If
     possible share the sample that showcases your query. Having a sample will
     enable us to directly analyze and validate your query, which can lead to a
     faster resolution.
We appreciate your cooperation in providing us with the
requested information, as it will help us provide a more effective solution to
your query.Regards,Hemanth Kumar S

Matthias Wagner · Answer

Hello,- i need the row data when hovering the mouse over the row. What i need to do is to show a tooltip for every grid cell, when hovering over this cell. The data i need to show in this tooltip depends on the data in this row and is requested from the backend.The tooltips must not be generated in advance. They have to created when hovering over this cell.- We use Syncfusion package 19.4.52- code:i tried to create a simplified version of my code on stackblitz. here is the link:  https://stackblitz.com/edit/angular-ivy-zypgne?file=src%2Fapp%2Fapp.component.ts Hope this helps, if you need further information let me know.Thanks and regardsMatthias

Hemanthkumar S · Answer

Hi Matthias Wagner,Query: What i need to do is to show a tooltip for every
grid cell, when hovering over this cell. The data i need to show in this
tooltip depends on the data in this row and is requested from the backend. The
tooltips must not be generated in advance. They have to created when hovering
over this cell.Upon reviewing your requirements, it is clear that you want
to display tooltip content based on row data for each cell when hovering over
it. To accomplish this, we have prepared a sample-level solution. Add a mouseover
event listener to the Grid within the created event of the Grid, as this
event is triggered when the component is created. By utilizing the currently
hovered cell element, you can access the row data using the getRowObjectFromUID
method of the Grid. Then, process your data request, create the necessary
tooltip content based on the row data, and display it within the mouseover
event listener. Additionally, you can handle the mouseleave event
listener to remove the tooltip when the mouse leaves the cell.For more information, please refer to the below code
example, screenshot, documentation, and sample.

[app.component.html]
   
      <ejs-grid
        #AustauschGrid
        id="AustauschGrid"
        locale="de"
        [dataSource]="DataSource"
        [allowResizing]="true"
        [allowSorting]="true"
        [allowTextWrap]="true"
        [enableStickyHeader]="true"
        (created)="created($event)"
      >
   
  [app.component.ts]
   
    @ViewChild('AustauschGrid')
    public grid: GridComponent;
    
  created(args) {
      (this.grid as any).element.addEventListener(
        'mouseover',
        this.mouseoverEvent.bind(this)
      );
    }
   
    mouseoverEvent(e) {
      let targetElement = e.target as Element;
      if (targetElement.classList.contains('e-rowcell')) {
        if (
          (targetElement as any).ej2_instances &&
          (targetElement as any).ej2_instances[0]
        ) {
          return;
        }
        const currentRow = targetElement.parentElement;
        const currentRowData = this.grid.getRowObjectFromUID(
          currentRow.getAttribute('data-uid')
        ).data; // row data
        // process your data request based on row data
        let tooltip: Tooltip = new Tooltip({
          content: 'This is ' + currentRowData['test'], // tooltip content based on row data
        });
        (tooltip as any).appendTo(targetElement);
        tooltip.open();
        targetElement.addEventListener('mouseleave', this.mouseleaveEvent);
      }
    }
   
    mouseleaveEvent(e) {
      const targetElement = e.target as HTMLElement;
      targetElement.removeEventListener('mouseleave', this.mouseleaveEvent);
      (targetElement as any).ej2_instances[0].destroy();
    }

Screenshot:created API: https://ej2.syncfusion.com/documentation/api/grid/#createdSample Link: https://stackblitz.com/edit/angular-ivy-8vysdb?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.htmlPlease feel free to contact us if you require any further
assistance. We are always available and eager to help you in any way we can.Regards,Hemanth Kumar S

Matthias Wagner · Answer

Thx, that is nearly what i want.I have just one more thing. Is it possible to access the field-value of the focused column?I like to do sth like the following:let content = '';      switch (e.column.field) {        case 'wirkstoff':          content = currentRowData['dosierung'] + ', ' + currentRowData['test'];          break;        case 'dosierung':          break;        case 'test':          break;        default:          break;      }      let tooltip: Tooltip = new Tooltip({        content: content, //'This is ' + currentRowData['test'], // tooltip content based on row data      });      (tooltip as any).appendTo(targetElement);      tooltip.open();https://stackblitz.com/edit/angular-ivy-adjmtp?file=src%2Fapp%2Fapp.component.ts My workaround so far is to use (e.target as any).cellIndex to get the column. But the problem here is, when i change the order of the columns i have to change my code.Thank you very much.Matthias

Matthias Wagner · Answer

Thank you very much. Works like a charm :-)

Suganya Gopinath · Answer

Hi Matthias, We are glad that the provided solution helped to solve the issue, please get back to us for further assistance. We are marking this status as solved. Regards,Suganya Gopinath.