Hi again.
OK. That one was more or less easy after sleeping a night and reading some more hints.
You need to add
(rowSelected)="rowSelected()
to your <ej-grid ....> line in the template file.
After that the function is called in the coressponding script file.
There you can get the Index with
this.Grid.widget.selectedIndexes
and the content of the row with
this.Grid.widget.selectedRecords.
Here is a little example:
test.Component.ts:
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { EJComponents } from 'ej-angular2/src/ej/core';
@Component({
selector: 'test',
templateUrl: "src/test/test.component.html"
})
export class testComponent{
private selectionMode;
private pageSettings;
public gridData: any;
constructor() {
this.selectionMode = { selectionMode: ["row"] };
this.pageSettings={pageSize: 4};
this.gridData = [{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5,
OrderDate: new Date(8364186e5), Freight: 32.38
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6,
OrderDate: new Date(836505e6), Freight: 11.61
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4,
OrderDate: new Date(8367642e5), Freight: 65.83
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3,
OrderDate: new Date(8367642e5), Freight: 41.34
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4,
OrderDate: new Date(8368506e5), Freight: 51.3
}];
}
rowSelected(args){
console.log(this.Grid.widget.selectedRowsIndexes);
console.log(this.Grid.widget.getSelectedRecords());
}
@ViewChild('grid') Grid: EJComponents<any, any>;
}
test.Component.html
<ej-grid #grid [allowPaging]="true" [pageSettings]="pageSettings" [allowSorting]="true" [dataSource]="gridData" selectionType="single" allowSelection="true" [selectionSettings]="selectionMode" (rowSelected)="rowSelected()>
<e-columns>
<e-column field="OrderID" headerText="Order ID" width="75" textAlign="right"></e-column>
<e-column field="CustomerID" headerText="Customer ID" width="80"></e-column>
<e-column field="EmployeeID" headerText="Employee ID" width="75" textAlign="right"></e-column>
<e-column field="Freight" width="75" format="{0:C}" textAlign="right"></e-column>
<e-column field="OrderDate" headerText="Order Date" width="80" format="{0:MM/dd/yyyy}" textAlign="right"></e-column>
</e-columns>
</ej-grid>
The code above is untested as I cut it out of a bigger project and adapted it for this example.
I hope it helps someone saving some time ;-)
Regards
Bernd
