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. Image for the cookie policy date
close icon

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

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

3 Replies

VA Venkatesh Ayothi Raman Syncfusion Team September 1, 2017 08:55 AM UTC

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, 

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. 



MB Marcelo Blank September 1, 2017 01:27 PM UTC

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,




VA Venkatesh Ayothi Raman Syncfusion Team September 4, 2017 12:06 PM UTC

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>  
2)       We access the Grid instance before we created a Grid control. 
And we suggest you to refresh the Grid content using jQuery selector like as follows, 
Code example
actionComplete(e:any){  
  
    if(e.requestType == "save")  
    {  
    $("#Grid").ejGrid("refreshContent");
    }  
 



Regards, 
Venkatesh Ayothiraman. 



Loader.
Up arrow icon