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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Loading Grid on ngOnInit()

Thread ID:

Created:

Updated:

Platform:

Replies:

140624 Oct 29,2018 03:40 PM UTC Nov 6,2018 08:49 AM UTC Angular - EJ 2 3
loading
Tags: Grid
Kelly Harrison
Asked On October 29, 2018 03:40 PM UTC

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

Mohammed Farook J [Syncfusion]
Replied On 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, 
 
 


Kelly Harrison
Replied On 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!

Mohammed Farook J [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;