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

Problem with DropDownList and InPlaceEditor

Hi,

I created a sample app

The first InPlaceEditor is actually how my object is structured in my app - it only has the Id which would be ok for the regular DropDownList (in terms of correctly mapping the text to the value).

When I click on the "3" the DropDownList maps the value to the correct text of the selected item. After changing or just saving it, the correct text is shown in the InPlaceEditor. I was expecting it to also map it correctly on intial rendering.

I added another InPlaceEditor which maps to an extended version of the regular class (added usrType: UserType) just to see if this works - which does except then the value when going into edit mode is empty.

Is this behaviour by design or am I missing something here?

Edit: I have another question - I'm using NGRX and would like to use an effect to update the entity on the server and get back a success/error notification and also show a spinner indicating the value is being updated. I saw on the demo that this happens when using the UrlAdaptor but I don't think I can intercept the request and kind of route it through NGRX. 

Is it possible to get it working as needed?

 



3 Replies

PO Prince Oliver Syncfusion Team April 17, 2019 03:52 AM UTC

Hello Paul, 

Thank you for contacting us. 

Query 1: “When I click on the "3" the DropDownList maps the value to the correct text of the selected item. After changing or just saving it, the correct text is shown in the InPlaceEditor. I was expecting it to also map it correctly on intial rendering.” 

Yes. This is the behavior of our In-place Editor component. By default, your saved value is shown on In-place Editor component. The selected text is stored in In-place Editor component and corresponding mapped value is stored on in-place editor’s value property. If you wish to show the corresponding value in the In-place Editor component after saved the changes, you can change the value property using actionSuccess event. Please find the below code. 

[app.component.html] 
<ejs-inplaceeditor (actionSuccess)="actionSuccess($event)"></ejs-inplaceeditor> 

[app.component.ts] 
@ViewChild('dropDown1') editObj: InPlaceEditorComponent; 
public actionSuccess(e: ActionEventArgs ): void { 
(<any>e).value = (<any>this.editObj).value; 
} 


Query 2: “I added another InPlaceEditor which maps to an extended version of the regular class (added usrType: UserType) just to see if this works - which does except then the value when going into edit mode is empty.” 

Yes. This is the behavior of our In-place Editor component. By default, the dropdown field value is mapped into In-place Editor component’s default value. If you have mapped the In-place Editor default value as DropDownList field text, the In-place editor shows the empty edit option. Because, corresponding dropdown field value is needed to map on In-place Editor default value
 
Query 3: “I'm using NGRX and would like to use an effect to update the entity on the server and get back a success/error notification and also show a spinner indicating the value is being updated. I saw on the demo that this happens when using the UrlAdaptor but I don't think I can intercept the request and kind of route it through NGRX.” 

You can get the action success or failure notification status using actionSuccess or actionFailure event. By default, spinner indication shows when update the value into the database. 
 

Please let us know if you need any further assistance on this. 

Regards, 
Prince 



PK Paul Kocher replied to Prince Oliver April 25, 2019 08:14 AM UTC

Query 3: “I'm using NGRX and would like to use an effect to update the entity on the server and get back a success/error notification and also show a spinner indicating the value is being updated. I saw on the demo that this happens when using the UrlAdaptor but I don't think I can intercept the request and kind of route it through NGRX.” 

You can get the action success or failure notification status using actionSuccess or actionFailure event. By default, spinner indication shows when update the value into the database. 
 


Hello Prince,

I was able to get things working regarding my query 1 and 2.

You said I can get the actionSuccess and actionFailure events - since I'm not using the url property, the component always returns an actionSuccess event even though I returned a 400 BadRequestError to see if it still fires the actionSuccess event.

Right now I'm using the actionBegin method to send the data to the server but I would need to wait for the server response.

How can I do that without using the url property? 😪


PO Prince Oliver Syncfusion Team April 30, 2019 09:41 AM UTC

Hello Paul,  
 
Thank you for your update. 
  
We have analyzed your reported query. You can show the success and error notification using a map and catchError in NGRX Effects. Depending on the response the effect either will show the success message if the request was successful or show the error message if the request has failed. 
  
It is possible to show the spinner component without using URL property in In-place Editor component. We have created a spinner component using created event and shown the spinner component before submitting the data into NGRX server. We have hidden this spinner component after successfully saved the data on the server using the map or catchError in NGRX Effects. Kindly refer to the following sample for your reference. 
  
 
In above sample, we have covered the things below, 
  • We have used tour-of-heroes-ngrx-entity stackblitz sample.
  • In this stackblitz sample inside the Heros tab, we have created the In-place Editor component and have listed out the saved hero’s data.
  • When submitting any value through In-place Editor component, it will show below hero’s list.
  • In actionBegin event, we have manually triggered the server action to save the data without using URL property and shown the spinner as per your requirement.
  
  
  
Let us know if you need any further assistance on this. 
 
Regards, 
Prince 


Loader.
Live Chat Icon For mobile
Up arrow icon