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

[dan]

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

}

[dan]

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

[Vignesh Natarajan]

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 

https://help.syncfusion.com/angular/grid/data-binding#remote-data  

https://help.syncfusion.com/js/datamanager/data-adaptors#webapi-adaptor    

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. 

https://www.syncfusion.com/products/essential-js2  

Demo page for ej2 Grid 

https://ej2.syncfusion.com/demos/#/material/grid/grid-overview.html  

Regards, 

Vignesh Natarajan 

[dan]

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?  

[Vignesh Natarajan]

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 

 

Sample: http://www.syncfusion.com/downloads/support/forum/141251/ze/skeleton-typescript-1328625851  

 

Refer the below link for your reference 

 

https://help.syncfusion.com/api/js/ejgrid#methods:destroy  

 

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