How to create Grid instance using @ViewChild in Angular 2?
We can access the JavaScript Data Grid instance in Angular2 component by using @ViewChild decorator and pass the template reference name as parameter to the @ViewChild decorator.
Template
<h2>Syncfusion Javascript Angular 2 Component</h2> <ej-grid #grid [dataSource]="gridData" [allowPaging]="true" > <e-columns> <e-column field="EmployeeID" [isPrimaryKey]="true" headerText="Employee ID" width="75" textAlign="right"></e-column> <e-column field="FirstName" headerText="First Name" width="110"></e-column> <e-column field="LastName" headerText="Last Name" width="110"></e-column> </e-columns> </ej-grid>
TypeScript
import {Component, ViewEncapsulation,ViewChild} from '@angular/core'; import {CommonModule} from "@angular/common"; import {EJComponents} from './ej/core';
@Component({ selector: 'ej-app', templateUrl: 'app/app.component.html', })
export class AppComponent {
public gridData = ej.DataManager({ url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Employees" });
@ViewChild('grid') Grid: EJComponents<any, any>; ngAfterViewInit(){
this.Grid.widget.selectRows(2)// call the selectrows API for selecting the rows }
} |
The following screenshot display the selected rows based on the value.
Figure 1: Output
