Class SfInPlaceEditor<TValue>

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

Inheritance

System.Object

SfBaseComponent

SfInPlaceEditor<TValue>

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

Namespace: Syncfusion.Blazor.InPlaceEditor

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfInPlaceEditor<TValue> : SfBaseComponent, IInPlaceEditor

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

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

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

public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A Microsoft.AspNetCore.Components.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

public string CssClass { get; set; }

Property Value

Type	Description
System.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

public bool Disabled { get; set; }

Property Value

Type	Description
System.Boolean	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

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

public string EmptyText { get; set; }

Property Value

Type	Description
System.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

public bool EnableEditMode { get; set; }

Property Value

Type	Description
System.Boolean	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

public bool EnablePersistence { get; set; }

Property Value

Type	Description
System.Boolean	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

public bool EnableRtl { get; set; }

Property Value

Type	Description
System.Boolean	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

public Dictionary<string, object> HtmlAttributes { get; set; }

Property Value

Type	Description
System.Collections.Generic.Dictionary<System.String, System.Object>	A System.Collections.Generic.Dictionary<, > 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

public string ID { get; set; }

Property Value

Type	Description
System.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

protected EditContext InPlaceEditContext { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.Forms.EditContext

Mode

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

Declaration

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

public string Name { get; set; }

Property Value

Type	Description
System.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

public string PrimaryKey { get; set; }

Property Value

Type	Description
System.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

public string SaveUrl { get; set; }

Property Value

Type	Description
System.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

public bool ShowButtons { get; set; }

Property Value

Type	Description
System.Boolean	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

public bool SubmitOnEnter { get; set; }

Property Value

Type	Description
System.Boolean	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

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

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

public EventCallback<TValue> ValueChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<TValue>	An Microsoft.AspNetCore.Components.EventCallback<> 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

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

Property Value

Type	Description
System.Linq.Expressions.Expression<System.Func<TValue>>	An System.Linq.Expressions.Expression<> 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
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

OnAfterRenderAsync(Boolean)

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
System.Boolean	firstRender	A bool value that is true if this is the first time the component has been rendered; otherwise, false.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task that represents the asynchronous rendering process.

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

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
System.Threading.Tasks.Task	A System.Threading.Tasks.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
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

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
System.Threading.Tasks.Task	A System.Threading.Tasks.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();
    }
}