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

Get Value for the change field

Hi,

We are using the sample from this link

Currently we populate a HTML table and using in-place editor to change the numeric field using below line

...
 @foreach (var item in orders)
                    {
                        <tr>
                            <td>@item.LineNo</td>
                            <td>@item.ProductModel.Name</td>
                            <EjsInPlaceEditor Mode="@mode"
                                              EditableOn="@editableOn"
                                              Type="@InputType.Numeric"
                                              ShowButtons="@showButtons"
                                              Disabled="@disabled"
                                              Value="@item.SellQuantity"
                                              SubmitOnEnter="false"
                                              Model="@numericModel">
                            </EjsInPlaceEditor>
                            <td>@item.UoM</td>
                            <td>@item.SellPrice</td>
                            <td>@item.LineTotal</td>
                        </tr>
                    }
...

our questions is, how to get the "changed value" so we can set it back to our Model

we try @onchange but it does not have that event in In-Place Editor

thx,
erick

10 Replies

PM Pandiyaraj Muniyandi Syncfusion Team August 2, 2019 01:32 AM

Hi Erick, 
 
Greetings from Syncfusion support. 
 
In-place Editor component doesn’t have support for “@onchange” event. But it possible to get the submitted (changed) value by using “@OnActionSuccess” event you can achieve your desired requirement, if the modified value once successfully submitted into local or server. Please refer the below API reference which would help you to get the changed value 
 
 
 
Index.razor 
 
<EjsInPlaceEditor Mode="@mode" 
                  EditableOn="@editableOn" 
                  Type="@InputType.Numeric" 
                  ShowButtons="@showButtons" 
                  Disabled="@disabled" 
                  Value="@item.SellQuantity" 
                  SubmitOnEnter="false" 
                  Model="@numericModel" 
                  OnActionSuccess="@OnSuccess"> // Event binding 
</EjsInPlaceEditor> 
 
@code { 
    public void OnSuccess(ActionEventArgs args) // Event for getting the submitted value 
    { 
        this.result = args.Value; // Current modified value 
    } 
} 
 
      
Please find the below sample for your reference. 
 
Regards, 
Pandiyaraj M 



ER Erick August 2, 2019 02:25 AM

Hi Pandiyaraj,

Yes i'm aware about that event but it can only have args.value (one value) since as u see it is a part of line detail so i need to know which line that change so i can adjust accordingly before the submit to API

any thoughts on this:
"if the modified value once successfully submitted into local or server."

how do we update the local Model after the changed?

thx,
erick


PM Pandiyaraj Muniyandi Syncfusion Team August 2, 2019 06:31 AM

Hi Erick, 
 
Thank you for your update.  
 
Query :  i need to know which line that change so i can adjust accordingly before the submit to API.  
              how do we update the local Model after the changed? 
 
You can get the current changed item, Line No by passing additional arguments to “OnActionSuccess” event handler. By accessing additional value, can achieve your requirement of local model update. 
 
 
Sample code: 
 
<EjsInPlaceEditor Mode="@mode" 
                 OnActionSuccess="@(e => OnSuccess(e, item.LineNo))"> // Pass additional argument required for filter and update data source 
</EjsInPlaceEditor> 
 
@code { 
    public void OnSuccess(ActionEventArgs args, int lineNo) // Event handler modified with accept the additional argument 
    { 
        Orders filterOrders = orders.Where((i, index) => i.LineNo.Equals(lineNo)).FirstOrDefault(); // Filter field matching item from datasource 
        filterOrders.SellQuantity = Int32.Parse(args.Value); // Update the modified value into datasource 
    } 
} 
 
Please find the below sample, based on your requirement. 
 
 
  
Regards, 
Pandiyaraj M 



ER Erick August 2, 2019 09:08 PM

Hi Pandiyaraj,

it works like a charm :D

is it mean we can call lambda function in all ActionEventArgs ?

thx,
erick


DM Dmitrik August 4, 2019 09:50 AM

Hi, 

seems to be this doesn't work in 17.2.40-beta. 
Can I force control to use two way binding to the Value? I want to have original value to reflect changes immediately. 


MI Mike August 4, 2019 03:30 PM

Seems to be broken for me as well in the current version.


PM Pandiyaraj Muniyandi Syncfusion Team August 5, 2019 03:25 AM

  
Hi Erick / Dmitrik / Mike, 
 
Thank you for your update.  
 
Query 1: is it mean we can call lambda function in all ActionEventArgs ? 
 
Yes, we can call the lambda function for all required place with events.  
 
For more details, read this blazor document event handling section as mentioned below link 
 
Query 2: seems to be this doesn't work in 17.2.40-beta.  
                 Seems to be broken for me as well in the current version. 
 
We have made, some major breaking changes with event initialization from 17.2.40-beta nuget package. The previous events initialization syntax is not worked in your application from this release. 
 
 
We suggest you, initialize the event by the following syntax 
 
Previous: 
 
<EjsInPlaceEditor Mode="@mode" OnActionSuccess="@(e => OnSuccess(e, item.LineNo))"> 
</EjsInPlaceEditor> 
 
 
 
Current: 
 
<EjsInPlaceEditor Mode="@mode"> 
      <InPlaceEditorEvents OnActionSuccess="@(e => OnSuccess(e, item.LineNo))"></InPlaceEditorEvents> 
</EjsInPlaceEditor> 
 
 
 
Query 3: Can I force control to use two way binding to the Value? I want to have original value to reflect changes immediately.  
 
The In-place Editor component doesn’t support two-way binding. But you can achieve this model binding through the action events of In-place editor. For example, the OnActionSuccess and OnActionFailed events. If you face any difficulties on handle the model binding with in-place editor component, let us know the details. We will happy to assist you. 
 
 
We have prepared sample for your reference, please find it from below link  
 
Regards, 
Pandiyaraj M 



ER Erick August 20, 2019 08:38 PM

Hi, 

sorry for not responding, i don't realized it

the above sample is working but now it break when i update to prev8 and using blazor components 45 version

any insight?

thx,
erick


ER Erick August 21, 2019 02:53 AM

hi,

i know how to achieve it..use "Events"

something like this:
 <EjsInPlaceEditor Mode="@mode"
                                                          EditableOn="@editableOn"
                                                          Type="@InputType.Numeric"
                                                          ShowButtons="@showButtons"
                                                          Disabled="@disabled"
                                                          Value="@item.Quantity"
                                                          SubmitOnEnter="false"
                                                          Model="@numericModel">
                                            <InPlaceEditorEvents TValue="int" OnActionSuccess="@(e => UpdateOrderDetail(e, item.LineNo))"></InPlaceEditorEvents>
                                        </EjsInPlaceEditor>

thx,
erick


PM Pandiyaraj Muniyandi Syncfusion Team August 21, 2019 03:40 AM

Hi Erick, 
 
Thanks for contacting us. 
 
Yes, we need to configure TValue attribute for events like you shared code block. Since we have provided generic type support for In-place Editor component from 17.2.46-beta release. Kindly refer the below release notes section 
  
 
Refer this sample syntax change code block: 
  
Previous:  
  
<EjsInPlaceEditor Mode="@mode">  
      <InPlaceEditorEvents   OnActionSuccess="@(e => OnSuccess(e, item.LineNo))"></InPlaceEditorEvents>  
</EjsInPlaceEditor>  
  
   
Current:  
  
<EjsInPlaceEditor Mode="@mode">  
      <InPlaceEditorEvents TValue="string" OnActionSuccess="@(e => OnSuccess(e, item.LineNo))"></InPlaceEditorEvents>  
</EjsInPlaceEditor>  
 
 
  
Regards, 
Pandiyaraj M 


Loader.
Live Chat Icon For mobile
Up arrow icon