How can we call a methode form the ej control in Angular 2 Typecript with code?

[jnord]

Hi,

how can we call a methode in Angular 2?

Example:

We want marked a record in the grid (selectedRows?). Then we want sort the grid (sortColumn).

How can we select the grid in the dom, to call the methods?

@ViewChild('grid') doesn't work. We get only properties.

Regards

j.nord

[Venkatesh Ayothi Raman]

Hi Jurgen, 

Thank you for contacting Syncfusion support. 

We can call the Grid methods from @Viewchild decorator. The problem is @Viewchild will be set only after ngAfterViewInit event fired.So, we suggest to use code like as follows, code example, 

Code example: 

export class AppComponent { 

    @ViewChild('grid')  

    public grid; 

    public gridData; 

    public dataManager; 

       data:array; 

    fieldsvalues:object; 

    value:string; 

     

    ngAfterViewInit() { 

        this.grid.widget.sortColumn('OrderID');/*call the sort column method */ 

        this.grid.widget.selectRows(2);  /*call the select rows method for select the record*/ 

    } 

Please let us know, if you have any further assistance. 

Regards, 

Venkatesh Ayothiraman. 

[jnord]

Hi Venkatesh,

thanks for answer but sorry so it doesn't work under Angular 2.

We have the Methode in ngAfterViewInit.

But where do you get the "widget" ?

To define the grid the code under Angular2 is:

@ViewChild('myGrid') grid: ElementRef;

And then you get under ngAfterViewInit:

this.grid.nativeElement. ??

and not "widgets"

How do you get the "widget" ???

[Venkatesh Ayothi Raman]

Hi Jurgen, 

Thank you for the update. 

We went through your code example and found that you are using” @ViewChild('myGrid') grid: ElementRef” and this is the cause we were unable to get the grid widget. So, we suggest you to use EJComponents instead of ElementRef. Please refer to the code example, 

Code example: 

/// <reference path="../ej/ej.web.all.d.ts" /> 

/// <reference path="../ej/Jquery.d.ts" /> 

 

 

import {Component} from '@angular/core'; 

import {CORE_DIRECTIVES, FORM_DIRECTIVES} from '@angular/common'; 

import {EJ_GRID_COMPONENTS} from 'ej/grid.component'; 

import {EJComponents} from 'ej/core'; 

import {ViewChild, Injectable} from '@angular/core'; 

@Component({ 

    selector: 'ej-app', 

    templateUrl: 'app/app.component.html', 

    directives: [EJ_GRID_COMPONENTS, CORE_DIRECTIVES] 

}) 

export class AppComponent { 

  

@ViewChild('mygrid') grid:EJComponents<any, any> ; //you can get widget to extend the EJComponents instead of Elementref 

        public gridData; 

        public dataManager; 

           . . . 

        ngAfterViewInit() { 

 

            this.grid.widget.sortColumn('OrderID','ascending');/*call the sort column method */ 

 

        } 

       . . . 

Regards, 

Venkatesh Ayothiraman. 

[jnord]

Hi Venkatesh,

it works. Thank you for the answer.

Regards

j.nord

[Venkatesh Ayothi Raman]

Hi Jurgen, 

Thanks for the feedback. 

We are happy to hear that your requirement is achieved. 

Regards, 

Venkatesh Ayothiraman.