Get row cell index in Angular Grid component

The Syncfusion Angular Grid enables you to determine the specific row and cell indices when a user interacts with the grid. This can be accomplished by utilizing the rowSelected event. In this context, the row and cell indices are obtained through the aria-rowindex attribute on the <tr> element (for the row) and the aria-colindex attribute on the <td> element (for the cell).

Below is an example demonstrating how to retrieve the row and cell index using the available events and DOM attributes. When a row is selected, the relevant indices are extracted and made accessible within the event handler logic.

app.component.ts

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent, GridModule, GroupService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule ],
    providers: [GroupService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' (rowSelected)='rowSelected($event)' height='267px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                </e-columns>
                </ejs-grid>`
})

export class AppComponent implements OnInit {

    public data?: object[];
    @ViewChild('grid')
    public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
    }

    rowSelected(args: any) {
        alert('row index: ' + (args as any).row.getAttribute('aria-rowindex'));
        alert('column index: ' + (args as any).target.getAttribute('aria-colindex'));
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));