Search results

Integrate HTML5 components (Template)

The In-place Editor supports adding HTML5 input components using the Template property. The Template property can be given as follows.

<InPlaceEditorTemplates>
    <Template>
        <input id="date" type="date" />
    </Template>
</InPlaceEditorTemplates>

Template mode, the Value property not handled by the In-place Editor component. So, before sending a value to the server, you need to modify the OnActionSuccess event, otherwise, an empty string will pass. In the following template sample, before submitting a data to the server, event argument and Value property content updated in the OnActionSuccess event handler.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.InPlaceEditor

<div id='container'>
    <span class="content-title"> Select date: </span>
    <EjsInPlaceEditor @ref="InplaceditorObj" EmptyText="Value" TValue="string" Mode="RenderMode.Inline" Type="InputType.Date">
        <InPlaceEditorEvents TValue="string" OnActionSuccess="OnSuccess"></InPlaceEditorEvents>
        <InPlaceEditorTemplates>
            <Template>
                <input @bind="Value" id="date" type="text" />
            </Template>
        </InPlaceEditorTemplates>
    </EjsInPlaceEditor>
</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 {
    EjsInPlaceEditor<string> InplaceditorObj;

    public string Value { get; set; } = "2018-05-23";

    private void OnSuccess(ActionEventArgs arg)
    {
        this.InplaceditorObj.Value = Value;
        arg.Value = Value;
    }
}

The output will be as follows.

html-template

See Also