blazor-devexpress-dot-blazor-ccabcc35.md
A multi-line text editor.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
public class DxMemo :
DxInputDataEditorBase<string>,
IFocusableEditor
The DevExpress Memo for Blazor (<DxMemo>) is a multi-line text editor that users can resize.
Follow the steps below to add the Memo component to an application:
<DxMemo /> markup to a .razor file.Refer to the following list for the component API reference: DxMemo Members.
Blazor Memo does not support static render mode. Enable interactivity to use the component in your application. Refer to the following topic for more details: Enable Interactive Render Mode.
Use the Text property to specify the edit value or to bind the editor to data. You can use the @bind attribute to bind the Text property to a data field. Refer to the following topic for details: Two-Way Data Binding.
<DxMemo Text="Some text"></DxMemo>
<DxMemo @bind-Text="@TextValue"></DxMemo>
@code {
string TextValue { get; set; } = "Some text";
}
The BindValueMode property specifies when the editor updates its value if a user modifies the text:
If you do not use two-way data binding, handle the TextChanged event to respond to changes made in the editor. The following code snippet enables the Update Text button once a user types in the Memo editor.
<DxMemo Text="Some text"
TextChanged="@((newValue) => OnTextChanged(newValue))"
BindValueMode="BindValueMode.OnInput">
</DxMemo>
<DxButton Enabled="@IsEnabled">Update Text</DxButton>
@code {
bool IsEnabled = true;
void OnTextChanged(string newValue) {
if (!string.IsNullOrEmpty(newValue)) {
IsEnabled = false;
} else IsEnabled = true;
}
}
The Blazor Memo component provides several options to manage its size and appearance in your application.
The Memo component initially displays two lines of text and can expand horizontally to fit the parent container’s width. If content exceeds two lines, the editor displays a vertical scrollbar.
Use the SizeMode property to specify a predefined size mode. This property determines text and Clear button size.
<DxMemo @bind-Text="@TextValue" SizeMode="SizeMode.Small"></DxMemo>
<DxMemo @bind-Text="@TextValue" SizeMode="SizeMode.Medium"></DxMemo>
<DxMemo @bind-Text="@TextValue" SizeMode="SizeMode.Large"></DxMemo>
@code {
string TextValue { get; set; } =
"Prepare 2020 Marketing Plan: We need to double revenues in 2020 "+
"and our marketing strategy is going to be key here. " +
"R&D is improving existing products and creating new products so we can "+
"deliver great AV equipment to our customers. " +
"Robert, please make certain to create a PowerPoint presentation "+"" +
"for the members of the executive team.";
Use the following properties to customize component size:
RowsSpecifies the initial number of visible text lines. In Auto resize mode, specifies the minimum number of visible text lines.MaxRowsSpecifies the maximum number of visible text lines.ColumnsSpecifies the Memo’s display width (the number of characters).
<DxMemo @bind-Text="@TextValue"
Rows="8"
MaxRows="20"
Columns="50">
</DxMemo>
@code {
string TextValue { get; set; } =
"Prepare 2020 Marketing Plan: We need to double revenues in 2020 "+
"and our marketing strategy is going to be key here. " +
"R&D is improving existing products and creating new products so we can "+
"deliver great AV equipment to our customers. " +
"Robert, please make certain to create a PowerPoint presentation "+"" +
"for the members of the executive team.";
}
For additional information, refer to the following help topic: Size Modes.
Use the ResizeMode property to specify how the Memo component can be resized. The following modes are available: Auto, Disabled, Horizontal, Vertical, VerticalAndHorizontal.
The following code specifies the VerticalAndHorizontal resize mode:
<DxMemo @bind-Text="@TextValue"
ResizeMode="MemoResizeMode.VerticalAndHorizontal">
</DxMemo>
@code {
string TextValue { get; set; } =
"Prepare 2020 Marketing Plan: We need to double revenues in 2020 "+
"and our marketing strategy is going to be key here. " +
"R&D is improving existing products and creating new products so we can "+
"deliver great AV equipment to our customers. " +
"Robert, please make certain to create a PowerPoint presentation "+"" +
"for the members of the executive team.";
The Memo component includes an AI-powered Smart Autocomplete extension that helps users compose text. As users type, an AI service analyzes their input and context and generates relevant text suggestions.
Users can interact with suggestions in the following ways:
Follow the steps below to add the Smart Autocomplete extension to the Memo component:
Register AI services.
Register the DevExpress.AIIntegration.Blazor.Editors namespace in the Components/Imports.razor file or in your Razor file:
Use the Extensions property to add the AI-powered Smart Autocomplete functionality to the Memo editor.
Note
The DevExpress Blazor Memo component is only responsible for displaying AI-generated text suggestions. The actual text analysis and suggestion generation are performed by the connected AI model. Since AI models may not always generate suggestions, we recommend that you handle the SuggestionReceived event and verify whether a suggestion is available.
Set the ClearButtonDisplayMode property to Auto to display the Clear button in the Memo editor when it is not empty. Use the NullText property to display prompt text (placeholder) in the editor when its value is null.
<DxMemo @bind-Text="@TextValue"
ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
NullText="Type text...">
</DxMemo>
@code {
string TextValue { get; set; } = "Prepare 2020 Marketing Plan: We need to double revenues in 2020 and our marketing strategy is going to be key here. " +
"R&D is improving existing products and creating new products so we can deliver great AV equipment to our customers. " +
"Robert, please make certain to create a PowerPoint presentation for the members of the executive team.";
}
Run Demo: Memo - Clear Button and Placeholder
You can add a standalone Memo editor or the Form Layout component to the Blazor’s standard EditForm. This form validates user input based on data annotation attributes defined in a model and indicates errors.
<EditForm Model="@model" Context="EditFormContext">
<DataAnnotationsValidator />
<DxFormLayout >
<DxFormLayoutItem Caption="Notes:" ColSpanMd="6" >
<Template >
<DxMemo @bind-Text="@model.Notes" />
</Template>
</DxFormLayoutItem>
@*...*@
</DxFormLayout>
</EditForm>
@code {
private Model model=new Model();
}
public class Model
{
[Required]
public string Notes { get; set; }
// ...
}
For additional information, refer to the following help topic: Validate Input.
Memo supports a read-only state. Set the ReadOnly property to true to activate this mode.
<DxMemo Text="@TextValue"
ReadOnly="true">
</DxMemo>
@code {
string TextValue { get; set; } = "End users cannot change the Memo value";
}
Run Demo: Memo - Read-Only and Disabled Modes
You can use HTML attributes and events to configure the Memo.
<DxMemo Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
spellcheck="false"
@onselect="MyFunction">
</DxMemo>
@code {
void MyFunction(){
//...
}
}
You can use the TextAreaCssClass property to change the appearance of the Memo’s text area. The following example applies a custom style (my-style) to the Memo’s text area:
<DxMemo @bind-Text="TextValue" TextAreaCssClass="my-style"></DxMemo>
@code {
string TextValue { get; set; } = "Prepare 2020 Marketing Plan: We need to double revenues in 2020 and our marketing strategy is going to be key here. " +
"R&D is improving existing products and creating new products so we can deliver great AV equipment to our customers. " +
"Robert, please make certain to create a PowerPoint presentation for the members of the executive team.";
}
.my-style {
opacity: 0.5;
}
If a Blazor application throws unexpected exceptions, refer to the following help topic: Troubleshooting.
Object ComponentBase DxComponentBase DxDataEditor<String> DxInputDataEditorBase<String> DxMemo
See Also