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.
Unfortunately, activation email could not send to your email. Please try again.

SelectedIndex in Grid

Thread ID:





128931 Feb 16,2017 10:02 AM Feb 17,2017 07:50 AM Angular 2
Tags: ejGrid
Bernd Schuhmacher
Asked On February 16, 2017 10:02 AM

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 01:45 AM

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 07:50 AM

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.

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.