Integrate HTML5 Components in Blazor In-place Editor

14 Aug 20261 minute to read

The In-place Editor supports integrating custom HTML5 input elements by using the InPlaceEditorTemplate child tag. The template content can be defined as follows.

<InPlaceEditorTemplate>
   <input id="date" type="text" />
</InPlaceEditorTemplate>

In Template mode, the Value property cannot be handled by the In-place Editor component. Therefore, before sending a value to the server, you must update the value through the OnActionSuccess event; otherwise, an empty string is sent.

In the following template example, the input is bound to a value, and before submitting data to the server, the event argument and Value are updated in the OnActionSuccess event handler.

@using Syncfusion.Blazor.InPlaceEditor

<div id='container'>
    <span class="content-title"> Select date: </span>
    <SfInPlaceEditor @ref="InplaceditorObj" EmptyText="Value" TValue="string" @bind-Value="@inplaceValue" Mode="RenderMode.Inline" Type="InputType.Template">
        <InPlaceEditorTemplate>
            <input @bind-value="@inplaceValue" id="date" type="text" />
        </InPlaceEditorTemplate>
        <InPlaceEditorEvents TValue="string" OnActionSuccess="OnSuccess"></InPlaceEditorEvents>
    </SfInPlaceEditor>
</div>

<style>
    #container {
        display: flex;
        justify-content: center;
    }

    #InplaceDate {
        width: 150px;
    }

    .content-title {
        font-weight: 500;
        margin-right: 20px;
        display: flex;
        align-items: center;
    }
</style>

@code {
    SfInPlaceEditor<string> InplaceditorObj;

    public string inplaceValue { get; set; } = "syncfusion";

    private void OnSuccess(ActionEventArgs<string> args)
    {
        inplaceValue = args.Value;
    }
}

See also

• Built-in Controls