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

Cannot read property 'refreshUI' of undefined

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();
}
)
}

1 Reply 1 reply marked as answer

TS Thavasianand Sankaranarayanan Syncfusion Team November 25, 2019 01:07 PM UTC

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(); 
      } 
   } 
} 
 

 
Regards, 
Thavasianand S. 


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon