DxHtmlEditorMention.SearchFieldNames Property

Specifies names of data source fields that the HTML Editor uses as search criteria for mentions.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Description
String[]	The names of data source fields.

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.

Assign multiple field names to the SearchFieldNames property to allow the component to search data in all specified fields.

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