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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Get Value for the change field

Thread ID:

Created:

Updated:

Platform:

Replies:

146385 Aug 2,2019 04:15 AM UTC Aug 21,2019 11:40 AM UTC Blazor 10
loading
Tags: In-place Editor
Erick
Asked On August 2, 2019 04:15 AM UTC

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 [Syncfusion]
Replied On August 2, 2019 09:32 AM UTC

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 


Erick
Replied On August 2, 2019 10:25 AM UTC

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 [Syncfusion]
Replied On August 2, 2019 02:31 PM UTC

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 


Erick
Replied On August 3, 2019 05:08 AM UTC

Hi Pandiyaraj,

it works like a charm :D

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

thx,
erick

Dmitrik
Replied On August 4, 2019 05:50 PM UTC

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
Replied On August 4, 2019 11:30 PM UTC

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

Pandiyaraj Muniyandi [Syncfusion]
Replied On August 5, 2019 11:25 AM UTC

  
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 


Erick
Replied On August 21, 2019 04:38 AM UTC

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
Replied On August 21, 2019 10:53 AM UTC

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 [Syncfusion]
Replied On August 21, 2019 11:40 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon