How to refresh datagrid programmatically

Question

I have a grid that I want to refresh after a record insert into DB. Add data to DB is working correctly. But I'm trying to use grid.refresh() method and is not working (the UI is not updated).

@ViewChild('grdLive') public grdLive: any;

public _data: Object[] = [];

constructor(private service: AbrechozeiraApiService) {     
    this.service.getLiveList().subscribe(data =>{      
      this._data = data;      
    });
  }

Salvar(){
        
    const live = {
      titulo: this.titulo,
      observacoes: this.observacoes,
      dataLive: this.dataLive,
      dataAlteracao: this.dataAlteracao,
      usuarioModificacaoId: this.usuarioModificacaoId
    };
    
    console.log(live);
    
    this.service.addLive(live).subscribe(response => {
      console.log(response);
      this.toastElement.show({title: 'Info Sistema', content: 'Tudo certo! Informação gravada.'});
      this.limparCampos();      
    }, error => {
      this.toastElement.show({title: 'Info Sistema', content: 'Erro ao gravar informação.'});
      console.log(error);
    });    
    
    this.GridReload();
  }

GridReload(){
    console.log("entrei o gridReload");
    
    this.service.getLiveList().subscribe(data =>{      
      var gridObj = this.grdLive;    
      gridObj.dataSource = data;
      gridObj.refresh();    
      console.log("passei pelo refresh");
    });        
  }

Johnson Soundararajan S · Answer

Hi Eduardo Rocha,
 We understand that you would like to refresh the datagrid
programmatically after adding the data to the database. We suggest that you can
refresh the grid using the freezeRefresh method instead of refresh
method.
 If you are still experiencing the issue, kindly provide
the following details:
 Could
     you provide more details about the data format returned from this.service.getLiveList().subscribe?
 Please
     share your complete grid rendering code, including the associated event
     (such as the queryCellInfo event).
 Could
     you provide a simple sample that replicates the issue and a video
     demonstration of the problem for better understanding and prompt
     resolution?
The above-requested details will be very helpful for us to validate the
reported query at our end and provide the solution as early as possible.Regards,Johnson Soundararajan S

Eduardo Rocha · Answer

Thanks for your suggestion Johnson, but it did not fix the problem.I will provide what you have requested.cadastro.component.html

Gestão

ID: 00
Título

Data

Observações

cadastro.component.tsimport { Component, OnInit, ViewChild } from '@angular/core';import { FormsModule } from '@angular/forms';import { ButtonModule } from '@syncfusion/ej2-angular-buttons';import { TextAreaModule } from '@syncfusion/ej2-angular-inputs';import { ToastModule } from '@syncfusion/ej2-angular-notifications';import { GridModule, PageSettingsModel, GroupSettingsModel } from '@syncfusion/ej2-angular-grids';import { AbrechozeiraApiService } from '../../../abrechozeira-api.service';@Component({ selector: 'app-live', standalone: true, imports: [ButtonModule, TextAreaModule, ToastModule, FormsModule, GridModule], templateUrl: './cadastro.component.html', styleUrl: './cadastro.component.css'})export class CadastroComponent implements OnInit{ @ViewChild('toastElement') public toastElement: any; @ViewChild('grdLive') public grdLive: any; titulo: string = ''; dataLive: Date = new Date(); observacoes: string = ''; dataAlteracao: Date = new Date(); usuarioModificacaoId: number = 1; public _data: Object[] = []; public pageOptions?: PageSettingsModel; public groupOptions: GroupSettingsModel = { //showDropArea: false, //columns: ['precoCusto'] }; public sortOptions?: object; constructor(private service: AbrechozeiraApiService) { this.service.getLiveList().subscribe(data =>{ this._data = data; }); } ngOnInit(): void { this.pageOptions = { pageSize: 50 }; this.sortOptions = { columns: [{ field: 'id', direction: 'Descending' }] }; } queryCellInfo(args: any) { if(args.column.headerText === 'Dia da Semana') { if(args.data.dataLive != '' && args.data.dataLive != null && args.data.dataLive != undefined){ args.cell.innerText = new Date(args.data.dataLive).toLocaleString("pt-br", { weekday: "long" }); } } } Salvar(){ const live = { titulo: this.titulo, observacoes: this.observacoes, dataLive: this.dataLive, dataAlteracao: this.dataAlteracao, usuarioModificacaoId: this.usuarioModificacaoId }; console.log(live); this.service.addLive(live).subscribe(response => { console.log(response); this.toastElement.show({title: 'Info Sistema', content: 'Tudo certo! Informação gravada.'}); this.limparCampos(); }, error => { this.toastElement.show({title: 'Info Sistema', content: 'Erro ao gravar informação.'}); console.log(error); }); this.GridReload(); } limparCampos(){ this.titulo = ''; this.observacoes = ''; this.dataLive = new Date(); this.dataAlteracao = new Date(); this.usuarioModificacaoId = 0; } GridReload(){ console.log("entrei o gridReload"); this.service.getLiveList().subscribe(data =>{ var gridObj = this.grdLive; gridObj.dataSource = data; gridObj.freezeRefresh(); console.log("passei pelo refresh"); }); } Refresh(){ var gridObj = this.grdLive; gridObj.freezeRefresh(); }}abrechozeira-api.service.tsimport {HttpClient} from '@angular/common/http';import { Injectable } from '@angular/core';import { Observable } from 'rxjs'; @Injectable()export class AbrechozeiraApiService { //readonly abrechozeiraAPIUrl = "http://api.abrechozeira.kinghost.net/api"; readonly abrechozeiraAPIUrl = "https://localhost:7194/api"; constructor(private http:HttpClient) { } // Tarefas addTarefa(data:any){ return this.http.post(this.abrechozeiraAPIUrl + '/tarefas', data) } updateTarefa(id:number|string, data:any){ return this.http.put(this.abrechozeiraAPIUrl + `/tarefas/${id}`, data) } deleteTarefa(id:number|string){ return this.http.delete(this.abrechozeiraAPIUrl + `/tarefas/${id}`) } // TarefaTipos getTarefaTiposList():Observable{ return this.http.get(this.abrechozeiraAPIUrl + '/tarefatipos'); } addTarefaTipos(data:any){ return this.http.post(this.abrechozeiraAPIUrl + '/tarefatipos', data) } updateTarefaTipos(id:number|string, data:any){ return this.http.put(this.abrechozeiraAPIUrl + `/tarefatipos/${id}`, data) } deleteTarefaTipos(id:number|string){ return this.http.delete(this.abrechozeiraAPIUrl + `/tarefatipos/${id}`) } // Status getStatusList():Observable{ return this.http.get(this.abrechozeiraAPIUrl + '/status'); } addStatus(data:any){ return this.http.post(this.abrechozeiraAPIUrl + '/status', data) } updateStatus(id:number|string, data:any){ return this.http.put(this.abrechozeiraAPIUrl + `/status/${id}`, data) } deleteStatus(id:number|string){ return this.http.delete(this.abrechozeiraAPIUrl + `/status/${id}`) } // Vendas getVendasCompleta():Observable{ return this.http.get(this.abrechozeiraAPIUrl + '/Vendas/GetVendasCompleta'); } getVendas():Observable{ return this.http.get(this.abrechozeiraAPIUrl + '/Vendas'); } addVendas(data:any){ return this.http.post(this.abrechozeiraAPIUrl + '/Vendas', data) } updateVendas(id:number|string, data:any){ return this.http.put(this.abrechozeiraAPIUrl + `/Vendas/${id}`, data) } deleteVendas(id:number|string){ return this.http.delete(this.abrechozeiraAPIUrl + `/Vendas/${id}`) } // Pessoa getPessoa():Observable{ return this.http.get(this.abrechozeiraAPIUrl + '/Pessoas'); } public async getPessoaPorNick(nickName: string):Promise{ return await this.http.get(this.abrechozeiraAPIUrl + `/Pessoas/GetPessoaPorNick?nickName=${nickName}`).pipe().toPromise(); } public async isClienteExistente(nickName: string):Promise{ console.log('isClienteExistente início' + nickName); try { this.http.get(this.abrechozeiraAPIUrl + `/Pessoas/GetPessoaPorNick?nickName=${nickName}`).pipe().toPromise().then(data =>{ if(data != null){ console.log('data não é nula'); if(data.id == 0){ console.log('id == 0'); return false; } else{ console.log('id != 0'); return true; } }else{ return false; } }); } catch (error) { return false; } } addPessoas(data:any){ return this.http.post(this.abrechozeiraAPIUrl + '/Pessoas', data); } updatePessoas(id:number|string, data:any){ return this.http.put(this.abrechozeiraAPIUrl + `/Pessoas/${id}`, data) } deletePessoas(id:number|string){ return this.http.delete(this.abrechozeiraAPIUrl + `/Pessoas/${id}`) } // Produto getProdutoList():Observable{ return this.http.get(this.abrechozeiraAPIUrl + '/Produtos'); } public async getProduto(id:number|string):Promise{ return await this.http.get(this.abrechozeiraAPIUrl + `/Produtos/${id}`).pipe().toPromise(); } getProdutoListCompleto():Observable{ return this.http.get(this.abrechozeiraAPIUrl + '/Produtos/GetProdutosCompleto'); } public async getProdutoPorDescricao(descricao: string):Promise{ return await this.http.get(this.abrechozeiraAPIUrl + `/Pessoas/GetProdutoPorDescricao?descricao=${descricao}`).pipe().toPromise(); } public async isProdutoExistentePorCodigoEstoque(codigoEstoque:number|string):Promise{ try { return await this.http.get(this.abrechozeiraAPIUrl + `/Produtos/ProdutoExistsByCodigoEstoque?codigoEstoque=${codigoEstoque}`).pipe().toPromise(); } catch (error) { return false; } } addProdutos(data:any){ console.log('entrei no add produto ' + this.abrechozeiraAPIUrl); return this.http.post(this.abrechozeiraAPIUrl + '/Produtos', data) } updateProdutos(id:number|string, data:any){ return this.http.put(this.abrechozeiraAPIUrl + `/Produtos/${id}`, data) } deleteProdutos(id:number|string){ return this.http.delete(this.abrechozeiraAPIUrl + `/Produtos/${id}`) } // Live getLiveList():Observable{ return this.http.get(this.abrechozeiraAPIUrl + '/lives'); } addLive(data:any){ return this.http.post(this.abrechozeiraAPIUrl + '/lives', data) } updateLive(id:number|string, data:any){ return this.http.put(this.abrechozeiraAPIUrl + `/lives/${id}`, data) } deleteLive(id:number|string){ return this.http.delete(this.abrechozeiraAPIUrl + `/lives/${id}`) }}If we can't fix with this, I will try to provide vídeo and a sample.Thanks in advance,Regards.Ed

Johnson Soundararajan S · Answer

Hi Eduardo Rocha,

Thank you for your patience. We recommend utilizing the changeDataSource method to
modify the datasource, which will automatically refresh the grid without the
need for manual refreshing. Additionally, please verify if the updated data has
been set in the GridReload method.

Please refer to the below API link for more information.

API link : Angular
Grid API component - Syncfusion
 If you are still experiencing the issue, kindly provide the
following details:
 
 Could you
     provide a simple sample that replicates the issue.
 Share
     us video demonstration of
     the problem for better understanding and prompt resolution?
 Please provide
     the current Syncfusion package version which you are using in your
     application.
The above-requested details will be very
helpful for us to validate the reported query at our end and provide the
solution as early as possible.Regards,Johnson Soundararajan S