Get Value for the change field

[Erick]

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

[Pandiyaraj Muniyandi]

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 

 

OnActionSuccess Event: https://help.syncfusion.com/cr/blazor/ 

 

Event Arguments: https://helpstaging.syncfusion.com/cr/aspnetcore-blazor/ 

 

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. 

Sample: https://www.syncfusion.com/downloads/support/forum/146385/ze/Editor1690386400 

 

Regards, 

Pandiyaraj M 

[Erick]

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

[Pandiyaraj Muniyandi]

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. 

 

Reference link: https://docs.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#event-handling  

 

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. 

Sample: https://www.syncfusion.com/downloads/support/forum/146385/ze/Editor-1669494965 

 

 

  

Regards, 

Pandiyaraj M 

[Erick]

Hi Pandiyaraj,

it works like a charm :D

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

thx,

erick

[Dmitrik]

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. 

[Mike]

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

[Pandiyaraj Muniyandi]

  

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 

https://docs.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#event-handling 

 

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. 

 

Release notes: https://ej2.syncfusion.com/blazor/documentation/release-notes/17.2.40/#common 

 

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  

https://www.syncfusion.com/downloads/support/forum/146385/ze/Editor-917825440 

 

Regards, 

Pandiyaraj M 

[Erick]

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

[Erick]

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

[Pandiyaraj Muniyandi]

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 

  

Release notes: https://ej2.syncfusion.com/blazor/documentation/release-notes/17.2.46/#inplaceeditor 

 

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