Blazor: Editors-Memo

Overview

Memo is a multi-line text editor that supports different size modes. To specify the component's size in code, use the SizeMode property.

To apply different size modes, use the drop-down list in the demo card's header.

Razor

<DxMemo @bind-Text="@TextValue"
        SizeMode="SizeMode">
</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.";
    SizeMode SizeMode { get; set; }
}

Custom Size

The Memo component is a two-line editor that stretches to fit the parent container’s width, by default. To change this behavior, use the following properties:

Rows - Specifies the number of text lines displayed by the editor.
Columns - Specifies the editor's display width in characters.

Razor

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

Resize Modes

Memo supports different resize modes that are specified by the ResizeMode property:

Vertical (Default) - Users can only change the component height.
Horizontal - Users can only change the component width.
VerticalAndHorizontal - Users can change both the component height and width.
Disabled - Users are not allowed to resize the component.

To apply different resize modes, use the Resize Mode drop-down list below.

Resize Mode:

Razor

<DxMemo @bind-Text="@TextValue"
        Columns="66"
        ResizeMode="ResizeMode">
</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.";

    MemoResizeMode ResizeMode { get; set; }
}

Clear Button and Placeholder

Set the ClearButtonDisplayMode property to Auto to display the Clear button in the editor when it is not empty. Use the NullText property to specify placeholder text that should be displayed when the editor is empty.

Razor

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

Read-Only and Disabled Modes

In this demo, the Memo displays values but does not allow users to change them. To implement this behavior, you can use any of the following modes:

Read-only mode. In this mode, you can use the keyboard to focus and navigate the component. Set the ReadOnly property to true to activate this mode.
Disabled mode. In this mode, the component cannot be focused or navigated. Set the Enabled property to false to activate this mode.

Read Only

Disabled

Razor

<DxMemo Text="@TextValue"
        ReadOnly="true">
</DxMemo>

<DxMemo Text="@TextValue"
        Enabled="false">
</DxMemo>

@code {
    string TextValue { get; set; } = "End users cannot change the Memo value";
}

Memo

Overview Custom Size Resize Modes Clear Button and Placeholder Read-Only and Disabled ModesUpd