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. Image for the cookie policy date

Loading Grid on ngOnInit()

I've just upgraded an app from ES1 Angular to ES2 Angular.  I'm having trouble getting grids to populate during ngOnInit.  I'm getting an array of objects from a web api service (using breeze).  The browser debugging tools show the api call returns the expected objects.

The call looks something like this:


  ngOnInit() {
     ...
    this.search(null);
  }

  search(event) {
    this._poRepository.searchPurchaseOrders(
      ... params ...
    ).then(
      purchaseOrders => {
        this.purchaseOrders = <any>purchaseOrders; // success
      },
      error => console.error(error) // error
    );
  }

I've included the relevant files.  Also, I can call search() via a button click and it works fine.  This worked prior to switching to ES 2 from ES 1.  Any ideas?  Am I missing something in the conversion to ES 2?

Thanks!


Attachment: posearch_25e28895.zip

3 Replies

MF Mohammed Farook J Syncfusion Team October 30, 2018 09:06 AM UTC

Hi Kelly, 
 
Thanks for contacting Syncfusion support. 
 
We have analyzed your code snippet. Before we procced this query, please share the following details for further  
 
  1. You have mentioned I'm getting an array of objects from a web api service (using breeze)”. So please share the screenshot of that array of object.
  2. From your query, we found that datasource is not correctly bonded to the Grid. So please create the actionFailure event in your Grid and send the response of that event.
 
[app.html] 
 
  <ejs-grid [dataSource]='data' (actionFailure)= 'actionFailure($event)' '> 
        . . .  
    </ejs-grid> 
 
[app.component.ts] 
 
. . .     
actionFailure(e):void{ 
 
    }; 
 
 
  1. Share your console window , if it has any script error.
  2. If possible share the issue reproducible sample to us.
 
Refer the following link to know about actionFailure event of the Grid, 
 
 



KH Kelly Harrison November 5, 2018 05:13 PM UTC

I implemented actionFailure() and that seems to have lead to the answer.  Here's the error:

Format options or type given must be invalid
throwError@webpack-internal:///./node_modules/@syncfusion/ej2-base/src/util.js:309:15
...

That let me to look at the date format I was using that worked with ej1: format="{0:MM/dd/yyyy}"

I updated it to format="yMd" and it works on ngOnInit.

I'm not sure what would change to allow the old format to work on button click, but it seems that things are resolved.

Thanks!


MF Mohammed Farook J Syncfusion Team November 6, 2018 08:49 AM UTC

Hi Kelly,  
 
We can achieved your requirement by using custom format future in the “column.format” property. Please refer the following code example and documentation link.  Please refer to the sample,  
 
__<ejs-grid [dataSource]='data' height="315px">  
    <e-columns>  
                 . .     
        <e-column field='OrderDate' type='date' headerText='Order Date'textAlign='Right' [format]='formatOptions' width=120></e-column>  
    </e-columns>  
</ejs-grid>  
  
[ts]  
export class AppComponent implements OnInit {  
  
    public data: Object[];  
    public formatOptions:any;  
    ngOnInit(): void {  
        this.data = data;  
        this.formatOptions={type:'date',format:"dd/MM/yyyy"};  
    }  
}  
 
 
Regards, 
J Mohammed Farook 


Loader.
Live Chat Icon For mobile
Up arrow icon