1. Home
  2. Forum
  3. jQuery
  4. dynamically load columns from external source (async)

dynamically load columns from external source (async)

Hi,

I try to load the grid columns dynamically from an external odatasource (async), I tried several things, but I always get the errors
"DataSource must not be empty at initial load since columns are generated from dataSource in AutoGenerate Column Grid"
or "Cannot read property 'executeLocal' of null"

In debug I already verified that the result of getting the columns is correct.

This is my current code, how to solve this?

mygrid.component.html

<ej-grid id="Grid">
</ej-grid>

mygrid.component.ts

ngOnInit(): void {

 this.data = new ej.DataManager({
  url: "http://odataserver/data",
  crossDomain: true,
  adaptor: new ej.ODataV4Adaptor,
 });

  this.httpClient.Get("http://odataserver/columns").subscribe((response: any) => {
  this.columns = response.columns;
  
  $("#Grid").ejGrid({
   dataSource: this.data,
   columns: this.columns
  });  

 }   
}

3 Replies
MS Mani Sankar Durai Syncfusion Team February 23, 2018 12:31 PM UTC

Hi Sietse, 

Thanks for contacting Syncfusion support.  

We have analyzed your query and we are able to reproduce the reported issue based on your code example.  
From your code example we have found that you are binding the dataSource and columns for already rendered grid. Since you are not defining any properties on html file and rendering the grid inside the ts file so we suggest you to use the below code example 
 
[home.component.html] 
<div id="Grid"> 
       //use div element. 
    </div> 
 
[home.component.ts] 
export class HomeComponent { 
    public gridData:any; 
    public data: any; 
    public columns: any; 
    constructor(private http: Http) { 
         
     } 
    ngOnInit(): void { 
        
        this.gridData = new ej.DataManager({ 
            url: "http://services.odata.org/V4/Northwind/Northwind.svc/Orders", 
            crossDomain: true, 
            adaptor: new ej.ODataV4Adaptor, 
        }); 
        this.http.get('api/Orders').subscribe((data: any) => { 
            this.columns = [{ field: "OrderID" }]; 
            $("#Grid").ejGrid({ 
                dataSource: this.gridData, 
                  allowPaging:true, 
                columns: this.columns, 
            }); 
        }); 
    } 
      

We have also prepared a sample that can be downloaded from the below link 

Please let us know if you need further assistance.  

Regards, 
Manisankar Durai. 


GU Guadalupe March 22, 2019 09:57 PM UTC

Hello

This is my problem, but I need use to Datasource in time of design (csharp).
It is possible?

VN Vignesh Natarajan Syncfusion Team March 25, 2019 11:29 AM UTC

Hi Guadalupe, 
 
Thanks for using Syncfusion products. 
 
Query#:-  I need use to Datasource in time of design (csharp). 
 
We have analyzed your query and we have prepared sample with autoGenerated columns.(i.e) Initially we have rendered Grid with auto Generated columns and rendered the  required columns from server side using Load event. 
 
Please refer to the sample Link:- 
 
 
Please refer to the code example:- 
 
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True"> 
           <ClientSideEvents Load="load"  /> 
        </ej:Grid> 
 
     <script type="text/javascript"> 
         
        function load(args) { 
            var orderData = JSON.parse('<%= new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(this.data)%>'); 
           this.model.columns = orderData; 
        } 
    </script> 
 
Serverside:- 
    
                  public IEnumerable data; 
         List<Orders> order = new List<Orders>(); 
          protected void Page_Load(object sender, EventArgs e){ 
            if (cols.Count == 0) {  
              cols.Add(new Col() { field = "OrderID" }); 
              cols.Add(new Col() { field = "EmployeeID" }); 
            } 
            BindDataSource(); 
        } 
 
        private void BindDataSource() 
        { 
             
           .    .    . 
            this.data = cols; 
            
        } 
 
        public static List<Col> cols = new List<Col>(); 
         
 
        [Serializable] 
        public class Col 
        { 
            public Col() 
            { 
 
            } 
            public Col(string field) 
            { 
                this.field= field;  
                
            } 
            public string field { get; set; } 
            
        } 
 
    } 
 
 
 
Refer our help documentation for your reference 
 
 
If your requirement is different from above solution, please share us the following details. 
 
  1. Exact scenario you need to achieve. Need to bind dataSource from server end or else need to bind columns from serverside).
  2. Have you faced any issue while binding dataSource.
 
Regards, 
Vignesh Natarajan. 
 


Loader.
Up arrow icon