How properly use observables and handle exceptions

[Edvin]

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

[Madhu Sudhanan P]

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(); 

    } 

} 

https://ej2.syncfusion.com/angular/documentation/api/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. 

https://ej2.syncfusion.com/angular/documentation/api/grid/#actionbegin 

https://ej2.syncfusion.com/angular/documentation/api/grid/#actioncomplete 

https://ej2.syncfusion.com/angular/documentation/api/grid/saveEventArgs/ 

https://ej2.syncfusion.com/angular/documentation/api/grid/addEventArgs/ 

https://ej2.syncfusion.com/angular/documentation/api/grid/editEventArgs/ 

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. 

https://ej2.syncfusion.com/angular/documentation/api/grid/#datasourcechanged 

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 

[Edvin]

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

[Edvin]

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

I can't continue with my work.

Thanks for advance.

Edvin

[Madhu Sudhanan P]

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. 

 

https://www.syncfusion.com/feedback/4314/need-to-maintain-edit-state-when-exception-thrown-during-save-operation-in-custom-binding 

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. 

https://www.syncfusion.com/feedback/4315/promise-is-not-resolved-properly-while-perform-crud-operation-with-observables 

  

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" 

        } 

    } 

 

Help documentation : https://ej2.syncfusion.com/angular/documentation/grid/how-to/customize-the-edit-dialog/  

Regards, 

Madhu Sudhanan P 

[Edvin]

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

[Madhu Sudhanan P]

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 

[Edvin]

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

[Gangabharathy Murugasen]

HI Edvin, 

Please use direct track for fastest response. You will get a guarantee response with in 24hours. 

Regards, 

M. Ganga  

 

[Edvin]

Ok. Thanks.

[Gangabharathy Murugasen]

HI Edvin, 

You’re welcome. 

Regards, 

M. Ganga