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
  1. Home
  2. Forum
  3. Angular - EJ 2
  4. How properly use observables and handle exceptions

How properly use observables and handle exceptions

Hi.

I'm using ej-grid (16.4.45) + angular (7.0.0) with observabled.

For getting data i'm using async pipe and static array (filled with observables).
For updating data in wrote DataSourceChanged event.
Everythink Works perfect. Almost. 

1. How propery handle exceptions ?
   For example when server (REST api) return http 500.
   I can show error in DataSourceChanged, but cannot revert row data to old values.
   Is it possible ?

2. I'm planning to use react forms for editting with grid.
    How are actionBegin, actionEnd and DataSourceChanged related ?
    Why we need actionBegin and actionEnd ? What happend between them ?
    And when is pending …..
    Can you explain behavior little more.  

3. I noticed strange behavior. 
    I put 1 input, 1 button and grid into my app component.
    I write some ID into Input and press button to fire search.
    Data come from server and populate (using observables) data in grid.
    If i plays with different id-s everithing works ok. 

    But after edit some record data and save it to server (in DataSourceChanged)
    changing ID in input not working any more. Well new data is comming of course
    but grid refuse to populate. Without any error.

Thanks for advance.

Edvin

10 Replies
MS Madhu Sudhanan P Syncfusion Team January 11, 2019 07:08 AM

Hi Edvin, 

Greetings from Syncfusion!! 

Query:  How propery handle exceptions ? For example when server (REST api) return http 500. I can show error in DataSourceChanged, but cannot revert row data to old values. Is it possible ? 

You can use the closeEdit method of the grid to cancel the edit on save operation. 


<ejs-grid #grid [dataSource]='data | async' .... (dataSourceChanged)= 'dataSourceChanged($event)'> 
    ... 
</ejs-grid> 


export class AsyncPipeComponent { 
   ... 
    @ViewChild('grid') 
    public grid: GridComponent   
     
    .... 
 
    public dataSourceChanged(state: DataStateChangeEventArgs): void { 
        //On error use closeEdit method. 
        this.grid.closeEdit(); 
    } 
} 



Query: How are actionBegin, actionEnd and DataSourceChanged related ? 

The actionBegin and actionComplete events will be triggered for every action begin and action. While edit/add starts, these events will be triggered with the appropriate arguments and requestType. You can get the argument details from the below links. 


Whereas the dataSourceChanged event will be triggered after the edit/add actions completed and save operation with the edited data has to be handled here. This event help us to intercept the default save operation. 


Query: I noticed strange behavior. I put 1 input, 1 button and grid into my app component.I write some ID into Input and press button to fire search. 

We are unable to proceed with the provided information. Could you provide more information regarding the problem you have faced that help us to analyze and provide solution as earlier as possible. 

Regards, 
Madhu Sudhanan P 


ED Edvin January 11, 2019 08:29 AM

Hi, thanks for your response.

1. Sorry using this.grid.closeEdit() is not working

When saving data steps are processed like this:

- actionBegin event fires up 
- progress indicator shows up
- dataSourceChanged event fires up
  In this event i call my servise and subscribe on response
- form closed down
- actionComplete event fires up
- now is see response error handler fires up na call grid.closeEdit().
  Isn't it too late ?

2. About last question: i attached component and template of my demo app.
  
Let explain what is wrong.

- When starting application getData(0) is called. Because data for ID=0 not exists, grid is empty. Fine.
- I change ID=1 and fire onSearch method. data is retrieved and populated to grid. Fine.
- Now i double click on grid -> form opens up and i change some data. Method dataSourceChanged is called and data are stored. Fine.
- Now I change ID=2 and fire onSearch method again. getData is called and data pushed to observable (data.next).
  Nothing happens. !!!
- If i now call onRefresh method (grid.refresh), actionBegin->dataStateChange->actionComplete fires up and data is populated.

It looks like populating data from outside code is not working like refreshing from grid (inside code).
If your component support observables then changing it from outside should work.
Remarks: It Works peferct in we don't change data inside grid. 


3. Is it possible to configure form (mode: dialog) size (height and width) ?

Thanks for advance.

Edvin





Attachment: ospi_e8dbf7f7.zip

ED Edvin January 14, 2019 01:50 PM

Hi, can you be so nice and answere on my questions.

I can't continue with my work.

Thanks for advance.

Edvin


MS Madhu Sudhanan P Syncfusion Team January 18, 2019 04:27 AM

Hi Edvin, 

Sorry for the delayed response. 

Query : using this.grid.closeEdit() is not working 
 
We have validated with our end and we confirmed “Need to maintain edit state when exception thrown with custom binding” as a defect and logged a report for the same . We will include the fix for the issue in any of our upcoming patch release.  

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link. 
 

Query2: It Works peferct in we don't change data inside grid.  
 
We have validated with our end and we confirmed “Promise is not resolved while perform CRUD operation with Observables” as a defect and logged a report for the same . We will include the fix for the issue in any of our upcoming patch release.  

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link. 

  
Query3:  Is it possible to configure form (mode: dialog) size (height and width) ? 
 
Yes, you can able to customize the edit dialog in actionComplete event of Grid . Please refer the below code example and help documentation link for more information. 

<ejs-grid #grid [dataSource]='data | async' [editSettings]='editSettings' (actionComplete)="actionComplete($event)" [toolbar]='toolbar' 
    (dataSourceChanged)='dataSourceChanged($event)' (dataStateChange)= 'dataStateChange($event)'> 
     . . . . . 
</ejs-grid> 
 
. . . . . 
actionComplete(args) { 
        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) { 
            let dialog = args.dialog; 
            // you can customize the dialog as per your requirement 
            dialog.height = "300px"; 
            dialog.width = "500px" 
        } 
    } 
 



Regards, 
Madhu Sudhanan P 


ED Edvin January 18, 2019 04:35 AM

Hi. Thanks for your answeres.

When this bugs will be fixed ?
In next patch or later ?

With this two bugs using grid with observables is not possible.

Thanks for advance.

Edvin

MS Madhu Sudhanan P Syncfusion Team January 18, 2019 05:15 AM

Hi Edvin, 

We have planned to include the fix for these issues in our January 30, 2019 patch release. Until then we appreciate your patience. Also as a workaround to refresh the grid with search data we suggest you to rebound the grid manually using refresh method. 

Regards, 
Madhu Sudhanan P 


ED Edvin January 18, 2019 05:23 AM

This would be perfect. Thanks. I will wait.

Can i ask you what is appropriate way to communicate with you ?
Syncfusuion has more channels (forum, github issues, direct track).

I want to use only one. The fastest. ;)
Sometimes reponses takes days. 

Regards.

Edvin

GM Gangabharathy Murugasen Syncfusion Team January 18, 2019 05:42 AM

HI Edvin, 
Please use direct track for fastest response. You will get a guarantee response with in 24hours. 
Regards, 
M. Ganga  
 


ED Edvin January 18, 2019 05:45 AM

Ok. Thanks.

GM Gangabharathy Murugasen Syncfusion Team January 21, 2019 02:25 AM

HI Edvin, 
You’re welcome. 
Regards, 
M. Ganga  


Loader.
Live Chat Icon For mobile
Up arrow icon