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

Grid refresh - Cannot read property 'refreshUI' of undefined

Thread ID:

Created:

Updated:

Platform:

Replies:

149087 Nov 14,2019 01:12 AM UTC Dec 11,2019 09:28 AM UTC JavaScript - EJ 2 5
loading
Tags: Grid
Travis
Asked On November 14, 2019 01:12 AM UTC

Hi:

I am attempting to populate an ej.grids.Grid where "this.Rows" is "this.Rows = [];" and contains data like  { “key”: object[] }


this.SfGrid.dataSource = this.Rows;
this.SfGrid.refresh();


I get the error "Cannot read property 'refreshUI' of undefined" when .refresh is called.  It seems that the grid is not fully create however, it has been defined with no rows, allowing me to add the rows to the dataSource later.

Any ideas what is happening?

Pavithra Subramaniyam [Syncfusion]
Replied On November 14, 2019 07:09 AM UTC

Hi Travis, 
 
Thanks for contacting Syncfusion support. 
 
Trying to refresh the Grid component before it is created fully will throws this error by default. So if you want to set the data dynamically you can use the “created” event of Grid component. Please refer to the below code example and API link for more information. 
 
[index.ts] 
let grid:Grid = new Grid({ 
   allowFiltering:true, 
     columns: [ 
      { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' }, 
      { field: 'CustomerID', headerText: 'Customer Name', width: 150 }, 
      { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' }, 
      ], 
     created:(e)=>{ 
      // setting new dataSource to Grid will automatically refresh it. 
      grid.dataSource =order; 
     } 
  }); 
  grid.appendTo('#Grid'); 
 
 
 
Please get back to us if you have any concern. 
 
Regards, 
Pavithra S. 


Travis
Replied On November 15, 2019 01:30 AM UTC

I am not using typescript, so the code example is a bit confusing for me.

My grid is created in javscript below. 

this.SfGrid = new ej.grids.Grid // Syncfusion Grid
  (
    {
      columns: this.Columns,
      dataSource: this.Rows,
      allowPaging: false, // scrollbar instead of pages
      allowResizing: true,
      allowSelection: true,
      selectionSettings:
      {
        mode: 'Row',
        type: (this.SelectMultiple) ? 'Multiple' : 'Single',
      },
      height: '550px',
      }.bind (this), // bind control scope
    }
  );

The "this.Rows" is null at this point, but gets populate before I refresh the grid:
"
this.SfGrid.dataSource = this.Rows;
this.SfGrid.refresh();
"

Any other thoughts?

Thanks

Pavithra Subramaniyam [Syncfusion]
Replied On November 15, 2019 08:59 AM UTC

Hi Travis, 
 
Based on your update we have prepared a sample in EJ5 in which we have updated the data in the “Created” event of Grid as well as we have set the data inside the button click event dynamically without calling the refresh method. Please refer to the below code example and sample link for more information. 
 
    var data =[]; 
    var grid = new ej.grids.Grid({ 
        dataSource: data, 
        columns: [ 
               .  .  . 
        ], 
 
      created:(e)=>{ 
        // setting data at initial rendering  
        grid.dataSource = window.hierarchyOrderdata; 
      } 
 
    }); 
    grid.appendTo('#Grid'); 
 
    document.getElementById('data').addEventListener("click",(e)=>{ 
      // setting data after Grid is rendering 
      grid.dataSource = window.orderData.slice(5,10); 
    }) 
 
 
 
 
If you are still facing the issue please share the below details that will be helpful for us to provide a better solution as early as possible. 
 
  1. In which event you are changing the DataSource
  2. Share the Syncfusion Version
 
Regards, 
Pavithra S. 


Travis
Replied On December 11, 2019 01:37 AM UTC

Sorry for the huge delay...

I am using the EJ2 Grid.  In my previous post you can see how I am creating the grid.  At that point the grid has no data. Later in my javascript, I get the row data and populated a array variable. 

I want todo something like this:

if (!this.SfGrid.IsInitialized) {
           // init grid
          // update data source by doing this:  this.SfGrid.dataSource = this.Rows;
        }

How can I initialize the grid separately from the grid creation?




Pavithra Subramaniyam [Syncfusion]
Replied On December 11, 2019 09:28 AM UTC

Hi Travis, 
 
Thanks for your update. 
   
We have validated the provided details. To render the grid, we must bind anyone of the grid property dataSource or columns. We have created the sample, in that initially we bind empty array to the grid dataSource and in the button click event we change the grid dataSource respectively. Please refer the below code and sample for more information.  
 
 
Index.js 
ej.grids.Grid.Inject(ej.grids.Resize); 
 
 var button = new ej.buttons.Button(); 
 
  button.appendTo('#element'); 
 
  button.element.onclick=function(){ 
 
    grid.dataSource=data 
    }; 
var grid = new ej.grids.Grid({ 
 
    dataSource: [], 
    columns: [ 
        { field: 'OrderID', headerText: 'Order ID', width: 140 }, 
------- 
    ], 
    height: 315 
}); 
grid.appendTo('#Grid'); 
 
 
If we misunderstood your query, kindly get back to us with the following details. 
  1. Share the sample with the reported issue.
  2. Share more details about your requirement.
  
Regards,  
Pavithra 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