DxHtmlEditorMention.DisplayFieldName Property

Specifies the data source field that populates display values for mentions.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public string DisplayFieldName { get; set; }

Property Value

Type	Description
String	The name of the data source field.

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:

Razor

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

PageMarkup

<div id="chat-window">
    <div class="message" tabindex="0">
        <div class="photo">
            <img alt="Kevin Carter" src="@StaticAssetUtils.GetImagePath("employees/5.jpg")" />
        </div>
        <div class="name"> Kevin Carter </div>
        <div class="date"> 07/03/24 - 12:22AM </div>
        <div class="text">
            <span class="mention" spellcheck="false">
                <span><span>@@</span>John Heart</span>
            </span>
            What experience do you have in this field?
        </div>
    </div>
    <br />
    <div class="message" tabindex="0">
        <div class="photo">
            <img alt="John Heart" src="@StaticAssetUtils.GetImagePath("employees/11.jpg")" />
        </div>
        <div class="name"> John Heart </div>
        <div class="date"> 07/03/24 - 12:25AM </div>
        <div class="text"> I've been in the audio/video industry since 2001, and I've been the CEO of DevAv since 2009. </div>
    </div>
    <br />
    <div class="message" tabindex="0">
        <div class="photo">
            <img alt="Kevin Carter" src="@StaticAssetUtils.GetImagePath("employees/5.jpg")" />
        </div>
        <div class="name"> Kevin Carter </div>
        <div class="date"> 07/03/24 - 12:26AM </div>
        <div class="text">
            That's very interesting.
            <span class="mention" spellcheck="false">
                <span><span>@@</span>Olivia Peyton</span>
            </span>
            , what do you think?
        </div>
    </div>
</div>

CSS

#chat-window {
    background-color: rgba(191, 191, 191, 0.15);
    height: 350px;
    padding: 10px;
    width: 100%;
}
.message {
    height: 100px;
    background-color: inherit;
    display: inline-block;
    max-width: 60%;
    border-radius: 5px;
    margin: 5px;
    padding: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    background-color: var(--bs-body-bg)
}
.name {
    font-weight: bold;
}
.date {
    opacity: 0.5;
}
.photo {
    float: left;
    height: 100%;
}
.photo > img {
    height: 40px;
    width: 40px;
    display: block;
    border-radius: 40px;
    margin-right: 10px;
    object-fit: cover;
    object-position: top;
}
.mention {
    color: var(--bs-primary);
}

Run Demo: HTML Editor - Mentions