Buttons in Blazor In-place Editor Component

1 Feb 20242 minutes to read

The In-place Editor has an option to save and cancel using buttons. The InPlaceEditorSaveButton and InPlaceEditorCancelButton tags accept the button properties for customizing the save and cancel button.

Buttons can be shown or hidden by setting a Boolean value to the ShowButtons property.

NOTE

Without buttons, the value will be processed in the following ways.

  • ActionOnBlur: By clicking outside, the editor component gets focus out and do an action based on this property value.
  • SubmitOnEnter: Pressing the Enter key performs the submit action if this property is set to true.

In the following sample, the Content and CssClass properties of the Button value are assigned to the InPlaceEditorSaveButton and InPlaceEditorCancelButton properties to customize its appearance. Also, check or uncheck the checkbox buttons rendered or removed from the editor.

NOTE

For more details about buttons, refer this documentation section.

@using Syncfusion.Blazor.InPlaceEditor
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Buttons

<table class="table-section">
    <tr>
        <td> Submit on Enter: </td>
        <td>
            <SfCheckBox @bind-Checked="SubmitOnEnter" Label="Show" ValueChange="OnChange" TChecked="bool"></SfCheckBox>
        </td>
    </tr>
    <tr>
        <td class="sample-td">Enter your name: </td>
        <td class="sample-td">
            <SfInPlaceEditor @bind-Value="@TextValue" SubmitOnEnter="SubmitOnEnter" TValue="string">
                <EditorComponent>
                    <SfTextBox @bind-Value="@TextValue" Placeholder="Enter some text"></SfTextBox>
                </EditorComponent>
                <InPlaceEditorSaveButton Content="OK" CssClass="e-outline"></InPlaceEditorSaveButton>
                <InPlaceEditorCancelButton Content="Cancel" CssClass="e-outline"></InPlaceEditorCancelButton>
             </SfInPlaceEditor>
        </td>
    </tr>
</table>

<style>
    .table-section {
        margin: 0 auto;
    }

    tr td:first-child {
        text-align: right;
        padding-right: 20px;
    }

    .sample-td {
        padding-top: 10px;
        min-width: 230px;
        height: 100px;
    }
</style>

@code {
    public bool SubmitOnEnter { get; set; } = true;

    public string TextValue = "Andrew";

    private void OnChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool>
    args)
    {
        this.SubmitOnEnter = args.Checked;
        this.StateHasChanged();
    }
}

Blazor In-place Editor with Buttons

See Also