Class SfInPlaceEditor<TValue>

A set of string constants used by the SfInPlaceEditor<TValue> component.

Inheritance

object

ComponentBase

OwningComponentBase

SfOwningComponentBase

SfBaseComponent

SfInPlaceEditor<TValue>

Implements

Inherited Members

ComponentBase.Assets

ComponentBase.AssignedRenderMode

ComponentBase.DispatchExceptionAsync(Exception)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.OnAfterRender(bool)

ComponentBase.OnInitialized()

ComponentBase.OnParametersSet()

ComponentBase.RendererInfo

ComponentBase.SetParametersAsync(ParameterView)

ComponentBase.ShouldRender()

ComponentBase.StateHasChanged()

object.Equals(object)

object.Equals(object, object)

object.GetHashCode()

object.GetType()

object.MemberwiseClone()

object.ReferenceEquals(object, object)

object.ToString()

OwningComponentBase.IsDisposed

OwningComponentBase.ScopedServices

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(bool)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnObservableChange(string, object, bool, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

Namespace: Syncfusion.Blazor.InPlaceEditor

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfInPlaceEditor<TValue> : SfBaseComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Type Parameters

Name	Description
TValue	Specifies the type of the value to be edited.

Remarks

The SfInPlaceEditor<TValue> component is a powerful tool for in-context editing, reducing the need for separate forms or dialogs. It supports various data types and can be integrated with other Syncfusion Blazor components like SfTextBox, SfDropDownList, and SfDatePicker.

Examples

A simple In-place Editor component with a text input.

<SfInPlaceEditor @bind-Value="EditorValue" Type="InputType.Text" Mode="RenderMode.Inline">
</SfInPlaceEditor>
@code {
   private string EditorValue { get; set; } = "Enter some text";
}

Constructors

SfInPlaceEditor()

Declaration

public SfInPlaceEditor()

Properties

ActionOnBlur

Gets or sets the action to be performed when the In-place editor loses focus.

Declaration

[Parameter]
public ActionBlur ActionOnBlur { get; set; }

Property Value

Type	Description
ActionBlur	One of the ActionBlur enumeration. The default value is Submit.

Remarks

The available actions are Submit, Cancel, and Ignore. This property determines whether the changes are saved, discarded, or ignored when the editor loses focus.

Adaptor

Gets or sets the adaptor type that is used by the DataManager to handle data operations.

Declaration

[Parameter]
public Adaptors Adaptor { get; set; }

Property Value

Type	Description
Adaptors	One of the Adaptors enumeration. The default value is JsonAdaptor.

Remarks

This property is essential for configuring how the DataManager communicates with the data source, such as OData, Web API, or local data.

ChildContent

Gets or sets the content of the In-place editor component, which can include custom components or elements.

Declaration

[Parameter]
public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
RenderFragment	A RenderFragment that defines the content to be displayed.

Remarks

This property allows you to nest other Blazor components or HTML elements inside the In-place editor.

CssClass

Gets or sets one or more custom CSS classes to be applied to the In-place editor component.

Declaration

[Parameter]
public string CssClass { get; set; }

Property Value

Type	Description
string	A `string` representing the CSS classes, separated by spaces. The default value is `null`.

Remarks

This property allows for complete customization of the component's appearance.

Disabled

Gets or sets a value indicating whether the In-place editor is disabled.

Declaration

[Parameter]
public bool Disabled { get; set; }

Property Value

Type	Description
bool	`true` to disable the component; otherwise, `false`. The default value is `false`.

Remarks

When disabled, the user cannot interact with the editor.

EditableOn

Gets or sets the user action that triggers the edit mode for the In-place editor.

Declaration

[Parameter]
public EditableType EditableOn { get; set; }

Property Value

Type	Description
EditableType	One of the EditableType enumeration. The default value is Click.

Remarks

The available options are Click, DoubleClick, and EditIconClick. This property defines how the user initiates editing.

EmptyText

Gets or sets the text to be displayed when the In-place editor's value is empty.

Declaration

[Parameter]
public string EmptyText { get; set; }

Property Value

Type	Description
string	A `string` representing the text to display. The default value is "Empty Text".

Remarks

This provides a visual cue to the user when no value has been set.

EnableEditMode

Gets or sets a value indicating whether the edit mode is enabled.

Declaration

[Parameter]
public bool EnableEditMode { get; set; }

Property Value

Type	Description
bool	`true` to enable the edit mode; otherwise, `false`. The default is `false`.

Remarks

When this property is set to true, the In-place editor switches to an editable state.

EnablePersistence

Gets or sets a value indicating whether to enable state persistence for the In-place editor.

Declaration

[Parameter]
public bool EnablePersistence { get; set; }

Property Value

Type	Description
bool	`true` to enable state persistence; otherwise, `false`. The default value is `false`.

Remarks

When enabled, the component's state will be preserved across page reloads.

EnableRtl

Gets or sets a value indicating whether to enable Right-To-Left (RTL) rendering for the In-place editor.

Declaration

[Parameter]
public bool EnableRtl { get; set; }

Property Value

Type	Description
bool	`true` to enable RTL mode; otherwise, `false`. The default value is `false`.

Remarks

When enabled, the component's layout and text direction are adjusted for right-to-left languages.

HtmlAttributes

Gets or sets a collection of additional HTML attributes to be applied to the In-place editor's root element.

Declaration

[Parameter(CaptureUnmatchedValues = true)]
public Dictionary<string, object> HtmlAttributes { get; set; }

Property Value

Type	Description
Dictionary<string, object>	A Dictionary<TKey, TValue> where the key is a `string` representing the attribute name, and the value is an `object` representing the attribute value.

Remarks

This allows you to add custom attributes like id, title, or data-* to the component's root element.

ID

Gets or sets the an unique id to the In-place editor component.

Declaration

[Parameter]
public string ID { get; set; }

Property Value

Type	Description
string	A `string` that serves as a unique identifier for the component. The default value is `null`.

Remarks

When a unique ID is not specified, a random id is generated.

InPlaceEditContext

Declaration

[CascadingParameter]
protected EditContext? InPlaceEditContext { get; set; }

Property Value

Type
EditContext

Mode

Gets or sets how the In-place editor's component is rendered during editing.

Declaration

[Parameter]
public RenderMode Mode { get; set; }

Property Value

Type	Description
RenderMode	One of the RenderMode enumeration. The default value is Inline.

Remarks

The editor can be rendered inline or in a popup. This property is applicable only when a Type is specified.

Name

Gets or sets the name of the component, which is used for data retrieval from the server.

Declaration

[Parameter]
public string Name { get; set; }

Property Value

Type	Description
string	A `string` representing the component's name. The default value is `null`.

Remarks

If no name is provided, the component's ID will be used instead.

PrimaryKey

Gets or sets the unique key of the editable field, used for saving data to a database.

Declaration

[Parameter]
public string PrimaryKey { get; set; }

Property Value

Type	Description
string	A `string` representing the primary key. The default value is `null`.

Remarks

This property is crucial for identifying the data record to be updated on the server.

SaveUrl

Gets or sets the server URL to which the data will be submitted.

Declaration

[Parameter]
public string SaveUrl { get; set; }

Property Value

Type	Description
string	A `string` representing the URL for the save action. The default value is `null`.

Remarks

This property is used when the In-place editor needs to post data to a remote server.

ShowButtons

Gets or sets a value indicating whether to show or a hide the Save and Cancel buttons.

Declaration

[Parameter]
public bool ShowButtons { get; set; }

Property Value

Type	Description
bool	`true` to show the buttons; otherwise, `false`. The default value is `true`.

Remarks

This property is applicable only when a Type is specified or when the editor is in Popup mode.

SubmitOnEnter

Gets or sets a value indicating whether to trigger the submit action when the Enter key is pressed.

Declaration

[Parameter]
public bool SubmitOnEnter { get; set; }

Property Value

Type	Description
bool	`true` to enable submitting on Enter; otherwise, `false`. The default value is `true`.

Remarks

This provides a convenient way for users to save their changes quickly.

Type

Gets or sets the type of component to be rendered within the In-place editor.

Declaration

[Parameter]
public InputType Type { get; set; }

Property Value

Type	Description
InputType	One of the InputType enumeration. The default value is Text.

Remarks

The In-place editor supports a variety of input types, including text, date pickers, dropdowns, and more.

Value

Gets or sets the value of the In-place editor.

Declaration

[Parameter]
public TValue Value { get; set; }

Property Value

Type	Description
TValue	The value of the component, which can be of any type specified by `TValue`.

Remarks

This property is used for data binding and represents the current value of the editor.

ValueChanged

Gets or sets a callback that triggers when the value of the In-place editor changes.

Declaration

[Parameter]
public EventCallback<TValue> ValueChanged { get; set; }

Property Value

Type	Description
EventCallback<TValue>	An EventCallback<TValue> that is invoked when the value changes.

Remarks

This event allows you to handle value changes and perform custom actions.

ValueExpression

Gets or sets the expression that defines the bound value.

Declaration

[Parameter]
public Expression<Func<TValue>> ValueExpression { get; set; }

Property Value

Type	Description
Expression<Func<TValue>>	An Expression<TDelegate> that specifies the value binding.

Remarks

This is typically used for two-way data binding with the @bind-Value syntax.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

OnAfterRenderAsync(bool)

Handles tasks after the component has been rendered, such as setting up client-side functionality and managing component state.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
bool	firstRender	A `bool` value that is `true` if this is the first time the component has been rendered; otherwise, `false`.

Returns

Type	Description
Task	A Task that represents the asynchronous rendering process.

Overrides

SfBaseComponent.OnAfterRenderAsync(bool)

Remarks

This method is called after every render of the component. On the first render, it handles loading persisted values, initializing the editor's value, and setting up the edit mode. It also ensures that the component's state is correctly synchronized with the UI.

OnInitializedAsync()

Initializes the component, setting up its initial state, properties, and attributes.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
Task	A Task that represents the asynchronous initialization process.

Overrides

SfBaseComponent.OnInitializedAsync()

Remarks

This method is called when the component is first created. It configures the component's ID, RTL settings, disabled state, and other essential properties. It also prepares the component for client-side scripting and handles persistence if enabled.

OnParametersSetAsync()

Responds to parameter changes and updates the component's state accordingly.

Declaration

protected override Task OnParametersSetAsync()

Returns

Type	Description
Task	A Task representing the asynchronous operation.

Overrides

ComponentBase.OnParametersSetAsync()

Remarks

This method is called when the component's parameters are updated. It tracks changes to properties like Mode, Disabled, EnableEditMode, Value, and others. When a property changes, this method ensures the component reflects the new state, such as updating the display value, handling edit mode transitions, and communicating changes to the client-side script.

SaveAsync()

Asynchronously saves the current value of the In-place editor.

Declaration

public Task SaveAsync()

Returns

Type	Description
Task	A Task that represents the asynchronous saving operation.

Remarks

This method programmatically triggers the save action, persisting the edited value without requiring user interaction. It is useful for scenarios where changes need to be saved automatically or through external triggers.

Examples

The following example demonstrates how to use the SaveAsync() method to save the editor's value.

<SfInPlaceEditor @ref="Editor" TValue="string" Mode="RenderMode.Inline">
    <EditorComponent>
        <Input type="text" @bind-value="@EditorValue" />
    </EditorComponent>
</SfInPlaceEditor>
<button @onclick="SaveValue">Save</button>
@code {
    private SfInPlaceEditor<string> Editor;
    private string EditorValue = "Initial Value";

    private async Task SaveValue()
    {
        await Editor.SaveAsync();
    }
}

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable