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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

SelectedIndex in Grid

Thread ID:





128931 Feb 16,2017 03:02 PM UTC Feb 17,2017 12:50 PM UTC Angular 2
Tags: ejGrid
Bernd Schuhmacher
Asked On February 16, 2017 03:02 PM UTC

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?


Bernd Schuhmacher
Replied On 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 ;-)


Alan Sangeeth S [Syncfusion]
Replied On 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 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon