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

Subscribe to this post

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

Reply | Reply with quote

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

}

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

Regards,

Thavasianand S.

Reply | Reply with quote

Cannot read property 'refreshUI' of undefined

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US