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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Cannot read property 'refreshUI' of undefined

Thread ID:





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


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 
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']
data => {
this.dataSource = data;
(this.groupsGrid.dataSource as ResultGroup[]) = data;

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. 
import { Component,ViewChild, OnInit } from '@angular/core'; 
import { data } from './datasource'; 
import { EditSettingsModel, GridComponent, ToolbarItems } from '@syncfusion/ej2-angular-grids'; 
    selector: 'app-container', 
    template: `<ejs-grid [dataSource]='data'#grid id='grid' [editSettings]='editSettings'[toolbar]='toolbar' (created)= Oncreated($event)'  > 
export class AppComponent implements OnInit { 
ngOnInit(): void { 
       this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' 
       this.toolbar = ['Add', 'Edit', 'Delete'] 
           data => { 
               this.dataSource = data; 
              (this.groupsGrid.dataSource as ResultGroup[]) = data; 

Thavasianand S. 


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