1. Home
  2. Forum
  3. Aurelia
  4. Using Aurelia Webpack setup the grid error is DataSource must not be empty at initial load since columns are generated from dataSource in AutoGenerate Column Grid

Using Aurelia Webpack setup the grid error is DataSource must not be empty at initial load since columns are generated from dataSource in AutoGenerate Column Grid

System
Windows 10
"syncfusion-javascript": "16.3.30"
"aurelia-syncfusion-bridge": "5.6.2",
I have a test.js, test.html,and a service page that calls an api using axios (similar to  fetch).

The data is being returned as I can see it in the log file. I also have tested that the grid does work using static data.

tenantCloudApi.js  this is the fetch part of the app

import axios from "axios";

export class WebAPI {

  async getList(){
    let mydata = await axios.get('https://home.tenantcloud.com/v1/landlord/property');
    return mydata.data.list;
  }
}

test.html

<template>
  <div>
    <ej-grid e-data-source.bind="gridData" e-columns.bind="cols">
    </ej-grid>
  </div>
</template>


test.js

import axios from 'axios';
import {WebAPI} from '../../services/tentantCloudApi'

export class Test {

  static inject = [WebAPI];

  constructor(api) {
    this.api = api;
    this.gridData = [];
    this.getdata();
  }

  async getdata() {
    this.gridData = await this.api.getList();
    console.log(this.gridData)
  }

}

4 Replies
DA dan December 2, 2018 04:21 PM UTC

This is using aurelia-syncfusion-bridge

I can see that the grid is bound before the data arrives from the fetch call.  How do I get the grid binding to wait for the data to be returned.  Attached is my code.

The services/tentantCloudApi.js is my api call.
test.js is the binding to your grid
test.html is the render file

If you look at the test.js I have a sample of const mydata = [json] directly bound to the grid.  This works.  The api call does not.

Attachment: sample_grid_4379113e.zip

VN Vignesh Natarajan Syncfusion Team December 3, 2018 04:31 PM UTC

Hi Dan, 

Thanks for using Syncfusion products. 

Query: “If you look at the test.js I have a sample of const mydata = [json] directly bound to the grid.  This works.  The api call does not.” 

From your query, we understand that you are facing issue while binding the data from WebAPI service in form of list. You have mentioned that Grid is able to load the data when bounding in form of static data. We suspect that you need to retrieve the data from API service. We have given support to various type of adaptor to return the data from service. To return the data from WebAPI service we suggest you to use WebAPI service  

Refer our UG documentation for your reference 



If you still face the issue please get back to us with more details. 

We also would like to let you know about our next generation JavaScript product - Essential JS 2, in case if you are not aware of it. Essential JS 2 is fully re-written to be modular, responsive and lightweight. 
We suggest you look into our following product page for more details. 


Demo page for ej2 Grid 


Regards, 
Vignesh Natarajan 



DA dan December 3, 2018 08:25 PM UTC

The api is not a standard webapi or odata so I need to just pull it down and load it as json.  The problem is I can pull the data down into json but the grid loads before the json is available.  I think using version 16.3.30 is this version 2?  

VN Vignesh Natarajan Syncfusion Team December 5, 2018 05:04 PM UTC

Hi Dan, 
 
Thanks for the update. 
 
Query: “The problem is I can pull the data down into json but the grid loads before the json is available.” 
 
From your query, we understand that you are facing issue when data is returned from api with time delay. We have achieved your requirement by destroying the initially render grid and re render the Grid with updated data.  Similarly you can re render the Grid with updated dataSource by destroying the previous existing Grid. 
 
Refer the below code example 
 
constructor(api) {     
    this.gridData = []; 
    this.getdata(); 
  } 
  async getdata() {   
  setTimeout(function(){  // to indicate the time taken from api.  
    var id = $(".e-grid").attr("id"); // get the element id which has Grid. 
    $("#"+id).ejGrid("destroy");// Destriy the existing Grid 
   this.gridData = [{ 
    OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, Verfied: false, 
    OrderDate: new Date(8364186e5), Freight: 32.38, name: {firstName: "Sans"} 
  },  
  .                .           .             .           .         .  
 }]; 
$("#"+id).ejGrid({dataSource: this.gridData}); // re render the Grid with updated dataSource. 
  },1000) 
  } 
} 
 
 
For your convenience we have prepared a sample which can be downloaded from below link 
 
 
Refer the below link for your reference 
 
 
Note: We have hided the initially loaded dialog by apply css style in index.html file. 
 
<style> 
    #ejControl_0AlertDialog,#ejControl_0AlertDialog_wrapper,#ejControl_0AlertDialog_overLay{ 
      display: none !important; 
    } 
    </style> 
 
 
Query2: “I think using version 16.3.30 is this version 2” 
 
From your code example, we have confirmed that you are using EJ1 Grid control. 
 
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan 


Loader.
Up arrow icon