Get Selected Row data from Grid

[Saravanakumar Pandi]

I need to get the selected row details from the grid. I have button in my column when clicking on the button I need to capture the row data. 

here is my Grid code HTML:

<ejs-grid #Grid id='Grid' [dataSource]='details' [editSettings]='editSettings' allowPaging='true' allowSorting='true' [pageSettings]='pageSettings'>

<e-columns>

<e-column field='FirstName' headerText='Language' width=60><ng-template #template let-data>

{{data.FirstName}} {{data.LastName}}

</ng-template> </e-column>

<e-column field='Gender' headerText='Skill Level' width=60></e-column>

<e-column field='Id' headerText='Action' width=70>

<ng-template #template let-details>

<button (click)='rowSelected($event)' class="btn btn-success btn-xs">Edit</button>

</ng-template>

</e-column>

</e-columns>

</ejs-grid>

Here is my component code:

this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };

rowSelected(args:RowSelectEventArgs){

let selectedrecords: Object[] = this.Grid.getSelectedRecords();

}

console.log(this.Grid.getSelectedRecords());

[Hariharan J V]

Hi Saravanakumar, 

 

Thanks for contacting Syncfusion support. 

 

 

We have validated your requirement and we can get the row information when button click by using ‘getRowInfo’ method. Please find the code example and sample for your reference. 

 

Code example 

 

 

[app.component.html] 

<ejs-grid #grid [dataSource]='data'> 

    <e-columns> 

        <e-column headerText='Employee Image' width='150' textAlign='Center'> 

            <ng-template #template let-data> 

                <button (click)='getRowData($event)'>{{data.EmployeeID}}</button> 

            </ng-template> 

        </e-column> 

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

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

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

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

    </e-columns> 

 

</ejs-grid> 

 

 

[app.component.ts] 

 

export class AppComponent implements OnInit { 

 

  public data: Object[]; 

 

@ViewChild('grid') 

  public grid: GridComponent; 

 

  ngOnInit(): void { 

    this.data = employeeData; 

  } 

 

  getRowData(args:any):void{ 

    console.log(this.grid.getRowInfo(args.target)); 

  } 

 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/grid-ng-sample1472945301.zip  

Documentation : https://ej2.syncfusion.com/angular/documentation/grid/api-gridComponent.html#getrowinfo  

Regards, 

Hariharan