Grid refresh - Cannot read property 'refreshUI' of undefined

[Travis]

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]

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

 

 

API: https://ej2.syncfusion.com/documentation/api/grid/#created 

 

Please get back to us if you have any concern. 

 

Regards, 

Pavithra S. 

[Travis]

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]

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

    }) 

 

 

 

Sample: https://stackblitz.com/edit/wcanbf-73vcgf?file=index.js 

 

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]

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]

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.  

 

Sample : https://stackblitz.com/edit/nknmm8-ka87w4?file=index.js 

 

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.