How to get value before submit

[Krasimir Ivanov]

Hello, 

I have an inplace editor and was wondering how to access the value that is currently in the component. My code is the following

<SfInPlaceEditor @[email protected]

                                 Mode=RenderMode.Inline

                                 ID="TextEditor"

                                 Type=InputType.RTE

                                 EditableOn=EditableType.Click

                                 SubmitOnEnter="true"

                                 EmptyText="No information provided yet."

                                 Name="RTE"

                                 TValue="string"

                                 @[email protected]

                                 Model="@RteModel">

                    <InPlaceEditorEvents TValue="string" OnActionSuccess=@(async e => {

                                                                               await this.SaveAsync();

                                                                           })>

                    </InPlaceEditorEvents>

</SfInPlaceEditor>

So basically if the previous value was for example "string" but I edit it to "string1" and do not submit I want to get the value via the SfInPlaceEditor reference. I need this in order to keep track of the text that is written while it is being written.

[Revanth Krishnan]

Hi Ivan, 

 

 

Greetings from Syncfusion Support. 

 

 

We have validated your query “How to get the value before submit in the In-Place Editor?” 

 

This can be achieved using the `ValueChange` event in the In-place Editor. We have prepared a sample based on the code snippet shared to get the value before submit using the `ValueChange` event. 

 

Code Snippet: 

 

<SfInPlaceEditor Mode="RenderMode.Inline" TValue="string" Type="InputType.RTE" Value="@RteValue" SubmitOnEnter="true" Model="@RteModel"> 

                <InPlaceEditorEvents TValue="string" ValueChange="ValueChangeFun"></InPlaceEditorEvents> 

            </SfInPlaceEditor> 

 

private void ValueChangeFun(Syncfusion.Blazor.InPlaceEditor.ChangeEventArgs<string> args) 

{ 

        var currentValue = args.Value; 

} 

 

Sample: https://www.syncfusion.com/downloads/support/forum/158607/ze/Inplace_Editor2102741563 

 

Can you please check the above code snippet and sample and let us know if it meets your requirement?  

 

Regards, 

Revanth 

[Krasimir Ivanov]

If I put a breakpoint on line 28 it only goes there when I edit the text and click outside the editor i.e. I submit. There could be some problem with the .net version because I am using .net core 3.1 and not .net 5. Therefore, I have changed the target framework:

<PropertyGroup>

    <TargetFramework>netcoreapp3.1</TargetFramework>

    <LangVersion>8.0</LangVersion>

</PropertyGroup>

[Revanth Krishnan]

Hi Ivan, 

 

 

Good day to you. 

 

 

We have validated your query “The `ValueChange` triggered only clicking outside of the editor. There could be some problem with dot net version 3.1” 

 

This issue not occur because of the dot net version, the `ValueChange` is not triggered clicking outside of the editor is because of the `SaveInterval` of  the Rich Text Editor which is 10000  by default. So changing the `SaveInterval` property of the Rich Text Editor to 1000 will resolve this issue and trigger the `ValueChange` event quickly.  

 

We have prepared a sample for your reference with the dot net version 3.1, 

 

Code Snippet: 

 

public RichTextEditorModel RteModel = new RichTextEditorModel() 

{ 

        Placeholder = "Enter your content here", 

        SaveInterval = 1000 

}; 

 

Sample: https://www.syncfusion.com/downloads/support/forum/158607/ze/InPlaceEditor_ValueChange-195713749 

 

Can you please check the above code snippet and sample and let us know if it resolves your issue? 

 

Regards, 

Revanth