Cannot read property 'refreshUI' of undefined

[adrian]

Hi,

I attempting to populate my grid when the page loads but the usual behavior of the grid is not to show any records, but when I get to see the data on the grid I get the "Cannot read property 'refreshUI' of undefined" error on the console.

Saw this other thread 

https://www.syncfusion.com/forums/149087/grid-refresh-cannot-read-property-39refreshui39-of-undefined

but wasn't able to adapt it in angular.

My code is as follows:

  dataSource: ResultGroup[]

editSettings: EditSettingsModel

toolbar: ToolbarItems[]

@ViewChild('groups', {static: true}) groupsGrid: GridComponent

ngOnInit() {

this.editSettings = {

showDeleteConfirmDialog: true,

allowEditing: true,

allowAdding: true,

allowDeleting: true,

mode: 'Dialog'

}

this.toolbar = ['Add', 'Edit', 'Delete']

this.groupsService.getGroups().subscribe(

data => {

this.dataSource = data;

(this.groupsGrid.dataSource as ResultGroup[]) = data;

this.groupsGrid.refresh();

}

)

}

[Thavasianand Sankaranarayanan]

Hi Adrian, 

 

Greetings from syncfusion support 

 

We suggest you to use the Created event to bind datasource into the grid. When the new dataSource bound, grid will automatically refresh it. Please follow the below code snippet. 

 

App.component.ts  

 

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

import { data } from './datasource'; 

import { EditSettingsModel, GridComponent, ToolbarItems } from '@syncfusion/ej2-angular-grids'; 

 

@Component({ 

    selector: 'app-container', 

    template: `<ejs-grid [dataSource]='data'#grid id='grid' [editSettings]='editSettings'[toolbar]='toolbar' (created)= Oncreated($event)'  > 

            … 

                </ejs-grid>` 

}) 

export class AppComponent implements OnInit { 

… 

 

ngOnInit(): void { 

       this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' 

          } 

       this.toolbar = ['Add', 'Edit', 'Delete'] 

 

       Oncreated(args){ 

           this.groupsService.getGroups().subscribe( 

           data => { 

               this.dataSource = data; 

              (this.groupsGrid.dataSource as ResultGroup[]) = data; 

               this.groupsGrid.refresh(); 

      } 

   } 

} 

 

Api link : https://ej2.syncfusion.com/angular/documentation/api/grid/#created 

 

Regards, 

Thavasianand S.