DxHtmlEditorMention.Marker Property

Specifies a character that activates the mention list on user input.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue("@")]
[Parameter]
public string Marker { get; set; }

Property Value

Type	Default	Description
String	"@"	The mention marker.

Remarks

Add a DxHtmlEditorMention object to the mention collection to create a mention list. To activate the mention list, a user types the corresponding marker. The default mention marker is @.

You need to specify the Marker property in the following cases:

• If you need to change the mention list marker.
• To allow users to address members of multiple mention lists in the mention collection. If two or more mention lists in the same collection have the same marker, the marker activates only the last mention list that uses this marker.

Example

The following code snippet creates a mention list with a custom marker:

<DxHtmlEditor Height="200px">
    <DxHtmlEditorMentions>
        <DxHtmlEditorMention Data="@EmployeesData"
                             DisplayFieldName="@nameof(MentionData.Name)"
                             SearchFieldNames="@SearchFieldNames"
                             Marker="$" />
    </DxHtmlEditorMentions>
</DxHtmlEditor>

@code {
    string[] SearchFieldNames = { nameof(MentionData.Name) };

    class MentionData {
        public string Name { get; set; }
        public string Team { get; set; }
    }
    MentionData[] EmployeesData = {
        new MentionData() { Name = "John Heart", Team = "Engineering" },
        new MentionData() { Name = "Kevin Carter", Team = "Engineering" },
        new MentionData() { Name = "Olivia Peyton", Team = "Management" },
        new MentionData() { Name = "Robert Reagan", Team = "Management" },
        new MentionData() { Name = "Cynthia Stanwick", Team = "Engineering" },
        new MentionData() { Name = "Brett Wade", Team = "Analysis" },
        new MentionData() { Name = "Greta Sims", Team = "QA" },
    };
}