We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

SelectedIndex in Grid

I have one more questions for today regarding the ejGrid controll for angular2.

Is there somewhere a howto for getting the rowIndex or contents of a selected row from an ejGrid Angular2 component?


2 Replies

BS Bernd Schuhmacher February 17, 2017 06:45 AM UTC

Hi again.

OK. That one was more or less easy after sleeping a night and reading some more hints.

You need to add
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
and the content of the row with

Here is a little example:

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { EJComponents } from 'ej-angular2/src/ej/core';

    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

    @ViewChild('grid') Grid: EJComponents<any, any>;

<ej-grid #grid [allowPaging]="true" [pageSettings]="pageSettings" [allowSorting]="true" [dataSource]="gridData" selectionType="single" allowSelection="true" [selectionSettings]="selectionMode" (rowSelected)="rowSelected()>
        <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>

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 ;-)


AS Alan Sangeeth S Syncfusion Team February 17, 2017 12:50 PM UTC

Hi Bernd, 

Thanks for using Syncfusion products. 

We are happy to hear that you have achieved your requirement. 

Please let us know if you have any other queries. We will be happy to help you. 

Alan Sangeeth S 

Live Chat Icon For mobile
Up arrow icon