DxMemo Class

A Memo component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public class DxMemo :
    DxTextEditorBase

Remarks

The DevExpress Memo for Blazor (<DxMemo>) is a multi-line text editor that users can resize.

Memo - Resize Modes

NOTE

Online Demo: Memo

Add Memo to a Project

To add the <DxMemo> component to an application, follow the steps below:

  1. Create an application. If you use Microsoft project templates, configure the application as described in this topic: Use Microsoft Templates.
  2. Add the <DxMemo>...</DxMemo> markup to your application.
  3. Configure the component (see the sections below).

Edit Value

Use the Text property to specify the edit value or to bind the editor to data:

<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 modified the text:

Handle the TextChanged event to respond to changes made in the editor. The code below 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;
    }
}

Size

To specify the editor's size, use the following properties:

  • Rows - Specifies the number of text lines in the editor.
  • Columns - Specifies the editor's display width (the number of characters).

These properties specify the predefined component size. Users can change it with a resize handle.

If these settings are unassigned, the Memo displays two lines of text and stretches to fit the parent container's width.

<DxMemo @bind-Text="@TextValue"
        Rows="8"
        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.";
}

Memo - Custom Size

NOTE

Online Demo: Memo - Custom Size

You can also use the SizeMode property to specify the size mode. The size mode determines the font and Clear button size.

The code below applies different size modes to Memo components.

<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.";
}

Memo Size Modes

For more information, refer to Size Modes.

Resize Modes

Use the ResizeMode property to specify how users can resize the Memo component. This property's values include: Horizontal, Vertical, HorizontalAndVertical, Disabled.

<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.";
}

Memo - Resize Modes

NOTE

Online Demo: Memo - Resize Modes

Clear Button

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 in the editor when its value is null.

Memo Clear Button

<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.";
}
NOTE

Online Demo: Memo - Clear Button

Input Validation

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();
}

For more information, refer to the following help topic: Validate Input.

NOTE

Online Demo: Form Validation

Read-Only State

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";
}

Memo Read-Only Mode

NOTE

Online Demo: Memo - Read-Only Mode

HTML Attributes

You can use HTML attributes 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"> 
</DxMemo>

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DxComponentBase<DevExpress.Blazor.Internal.JSInterop.JSInteropProxyBase>
DevExpress.Blazor.Internal.DxEditorBase<String, DevExpress.Blazor.Internal.JSInterop.JSInteropProxyBase>
DxResizableEditorBase<String, DevExpress.Blazor.Internal.JSInterop.JSInteropProxyBase>
See Also