Refresh Grid after Save Data - TypeError: Cannot read property 'widget' of undefined

[Marcelo Blank]

Hi, 

I´m trying to refresh the grid after savind data on it.

Using:

// Create grid instance.

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

Refreshing the grid:

this.Grid.widget.refreshContent();      

Gives the follow error:

ERROR TypeError: Cannot read property 'widget' of undefined at TipoPessoaComponent.webpackJsonp.../../../../../src/app/tabelas/tipo-pessoa/tipo-pessoa.component.ts.TipoPessoaComponent.Refresh (tipo-pessoa.component.ts:109) at Object.eval [as handleEvent] (TipoPessoaComponent.html:1) at handleEvent (core.es5.js:12014) at callWithDebugContext (core.es5.js:13475) at Object.debugHandleEvent [as handleEvent] (core.es5.js:13063) at dispatchEvent (core.es5.js:8607) at core.es5.js:9218 at HTMLButtonElement.<anonymous> (platform-browser.es5.js:2651) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425) at Object.onInvokeTask (core.es5.js:3881)

import { Component, ViewEncapsulation, ViewChild , OnInit} from '@angular/core';

import { Http, Response, Headers, RequestOptions, Jsonp } from '@angular/http';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { Observable } from 'rxjs/Rx';

import 'rxjs/add/observable/forkJoin';

import { element } from 'protractor';

import { EJComponents } from 'ej-angular2';

import { TipoPessoaService } from '../servicos/tipo-pessoa.service';

import { TipoPessoa } from '../data-model/tipo-pessoa';

@Component({

selector: 'app-tipo-pessoa',

templateUrl: './tipo-pessoa.component.html',

styleUrls: ['./tipo-pessoa.component.css'],

providers: [TipoPessoaService],

})

export class TipoPessoaComponent implements OnInit {

errorMessage: string = '';

isLoading: boolean = true;

tipoPessoas: TipoPessoa[] = [];

public gridData;

public editSettings;

public toolbarItems;

public editType;

// Create grid instance.

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

constructor(private tipoPessoaService: TipoPessoaService) {

this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true};

this.toolbarItems = { showToolbar : true, toolbarItems : ["add", "edit", "delete", "update", "cancel"]};

this.editType = ej.Grid.EditingType.Boolean;

}

ngOnInit() {

this.tipoPessoaService.getTipos()

.subscribe(data => this.tipoPessoas = data);

}

actionBegin(data) {

var request = data.requestType;

if(request == "save")

{

var tipoId = data.rowData.Id == null ? 0 : data.rowData.Id;

if(tipoId == 0 ) // nova empresa

{

//console.log(data.rowData);

var retorno = this.tipoPessoaService.createTipo(data.rowData).subscribe((res) =>

{

if ( res.success == true)

{

//alert("Dados Gravados com Sucesso.");

}

else

{//alert(res.message);

}

})

}

else // update

{

//console.log(data.rowData);

var retorno = this.tipoPessoaService.updateTipo(data.rowData).subscribe((res) =>

{

if ( res.success == true)

{

//alert("OK");

}

else

{

//alert(res.message);

}

})

}

}

}

actionComplete(e :any) {

//console.log(e);

//console.log("1 - " + e.requestType);

if(e.requestType == "save")

{

this.Grid.widget.refreshContent();

}

}

Refresh(){

this.Grid.widget.refreshContent();

}

}

Attachment: App_5a3c.zip

[Venkatesh Ayothi Raman]

Hi Marcelo, 

Thanks for contacting Syncfusion support. 

We were unable to reproduced the reported issue at our end and we have prepared a sample for your reference which can be download from following link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/angular2-seeds-systemjs-1279899535 

In this sample, we have refresh the Grid content after the saving the Grid record like as follows, 

Code example: 

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

import {CommonModule} from "@angular/common"; 

import {EJComponents} from 'ej-angular2'; 

 

@Component({ 

    selector: 'ej-app', 

    templateUrl: 'src/grid/grid.component.html', 

}) 

export class GridComponent { 

    public gridData: any; 

    public editSettings; 

       public page:any; 

        public toolbarItems; 

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

    ; 

    ngAfterViewInit(){ 

    

    this.Grid.widget.selectRows(0)// call the selectrows API for selecting the rows 

    } 

 

    actionComplete(e:any){ 

 

    if(e.requestType == "save") 

    { 

    this.Grid.widget.refreshContent(); 

 

    } 

 

    } 

This issue was reproduced when we access the grid instance before we created a Grid control. Please confirm whether Grid control are rendered while we accessing that instance and If you still face the same issue, then could you please provide following details? 

1)      Share the scenario for replication procedure. 

2)      Why do you refresh the Grid after updating the record?  Because we refresh the updated data in Grid after updating the record. 

3)      A sample if possible or modified the given sample as issue reproducible. 

Regards, 

Venkatesh Ayothiraman. 

[Marcelo Blank]

Hi Venkatesh

Thanks for the example.

1)      Share the scenario for replication procedure. 

     We will need use some calculated information generate in our API  that need to be displayd in the grid after the users save it ... the test is with an information that was not input by the user ... and is displayed in the grid after the process ...

2)      Why do you refresh the Grid after updating the record?  Because we refresh the updated data in Grid after updating the record. 

     >> The Id in the grid is an autonumber ( to simulated the issue in quaetion 1) and after save it doesn´t display in the grid... what I try to do is show the Id in the grid after save...

3)      A sample if possible or modified the given sample as issue reproducible. 

Does it makes sense or am I doing something wrong ?

And, to make it clear, what when and why the error reported occurs ?

TypeError: Cannot read property 'widget' of undefined

Thanks once more in advanced,

Regards,

[Venkatesh Ayothi Raman]

Hi Marcelo, 

Thanks for the update. 

This issue was reproduced in following scenarios 

1)      Define the Grid id as wrong in ViewChild decorator. For e.g., we have defined grid id as follows “<ej-grid #grid  [dataSource]="gridData" [allowPaging]="true" >”  in template. But in ViewChild decorator defined the Grid id as different like @ViewChild('g1') Grid: EJComponents<any, any>