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.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

132427 Aug 31,2017 09:28 PM Sep 4,2017 08:06 AM Angular 3
loading
Tags: ejGrid
Marcelo Blank
Asked On August 31, 2017 09:28 PM

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 [Syncfusion]
Replied On September 1, 2017 04:55 AM

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. 


Marcelo Blank
Replied On September 1, 2017 09:27 AM

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 [Syncfusion]
Replied On September 4, 2017 08:06 AM

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. 



CONFIRMATION

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.

;