Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxHtmlEditorMention.Data Property

Specifies an object that supplies data for the mention list.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[Parameter]
public IEnumerable<object> Data { get; set; }

#Property Value

Type Description
IEnumerable<Object>

A data source.

#Remarks

<DxHtmlEditor> supports mention functionality. When a user types a predefined marker, the component displays a list of available items. Use the Data property to bind the DxHtmlEditorMention component to an IEnumerable<T> data source. Once complete, use the DisplayFieldName property to specify what field values the component displays in the list.

To enable search operations for mentions, assign corresponding names of data source fields to the SearchFieldNames property.

#Example

The following code snippet implements mentions to emulate the functionality common to many collaboration tools:

Html Editor - Mentions

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

@code {
    string Markup = @"<p>
                      <span class='dx-mention' spellcheck='false' data-marker='@' data-mention-value='Kevin Carter'>
                        <span>
                            <span>@</span>
                            Kevin Carter
                        </span>
                      </span>
                      I think John's expertise can be very valuable in our startup.
                    </p>";
    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" },
    };
}

Run Demo: HTML Editor - Mentions

See Also