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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Cannot read property 'refreshUI' of undefined

Thread ID:

Created:

Updated:

Platform:

Replies:

149356 Nov 22,2019 03:44 PM UTC Nov 25,2019 01:07 PM UTC Angular - EJ 2 1
loading
Tags: Grid
adrian
Asked On November 22, 2019 03:44 PM UTC

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 [Syncfusion]
Replied On 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. 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon