Class SfMention<TItem>

Represents a Syncfusion Blazor Mention component, which allows users to type a specified character (e.g., '@' or '#') to trigger a popup suggestion list for mentions/tags and select or insert one or more items into any editable target element.

Inheritance
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
SfBaseComponent
SfDataBoundComponent
SfDropDownBase<TItem>
SfMention<TItem>
Implements
Inherited Members
Namespace: Syncfusion.Blazor.DropDowns
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfMention<TItem> : SfDropDownBase<TItem>, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
Type Parameters
Name Description
TItem

Specifies the type of the underlying data source for mention suggestions.
Remarks

SfMention<TItem> supports both primitive and complex data binding, templates for suggestion and selected item display, grouping, built-in keyboard and accessibility features, and integration with custom queries and data sources. Typical usage scenarios include chat apps, comment systems, tagging, and rich editors.

Examples

The following demonstrates a mention for a games list with custom display:

<SfMention TItem="Games" DataSource="@GamesData">
  <ChildContent>
    <MentionFieldSettings Value="ID" Text="Text"/>
  </ChildContent>
  <TargetComponent>
    <div id="mentionTarget"></div>
  </TargetComponent>
</SfMention>
@code {
   public class Games {
       public string ID { get; set; }
       public string Text { get; set; }
   }
   List<Games> GamesData = new List<Games> {
       new Games() { ID = "Game1", Text = "American Football" },
       new Games() { ID = "Game2", Text = "Badminton" },
       new Games() { ID = "Game3", Text = "Basketball" },
       new Games() { ID = "Game4", Text = "Cricket" },
       new Games() { ID = "Game5", Text = "Football" },
       new Games() { ID = "Game6", Text = "Golf" }
   };
}

Typical usage of SfMention for user mentions:

<SfMention TValue="string" DataSource="@Users" Target="#mentionBox">
    <TargetComponent>
        <div id="mentionBox"></div>
    </TargetComponent>
</SfMention>
@code {
    List<string> Users = new List<string> { "John Doe", "Jane Smith" };
}

The following shows how to display the mention popup programmatically:

@inject SfMention<User> MentionObj
<button @onclick="MentionObj.ShowPopupAsync">Show Suggestions</button>

Constructors

SfMention()

Declaration
public SfMention()

Properties

AllowSpaces

Gets or sets whether to continue search action if user enter space after mention character while searching.

Declaration
[Parameter]
public bool AllowSpaces { get; set; }
Property Value
Type Description
bool

true, the search action takes place even after a space, if the DataSource data's are matched. The default value is false.
Remarks

By default, the SfMention<TItem> component will only search for mentions when the mention character is immediately followed by a non-whitespace character (e.g. @john but not @ john). However, you can change this behavior and allow the SfMention component to continue searching for mentions even if the user enters a space after the mention character by setting the AllowSpaces property to true.

Closed

Provides information about the Closed event callback.

Declaration
[Parameter]
public EventCallback<object> Closed { get; set; }
Property Value
Type Description
EventCallback<object>

An event callback function.

Closing

Provides information about the Closing event callback.

Declaration
[Parameter]
public EventCallback<MentionClosingEventArgs> Closing { get; set; }
Property Value
Type Description
EventCallback<MentionClosingEventArgs>

An event callback function.
Remarks

You can prevent the popup close action using Cancel and the popup remains opened always.

Examples
<SfMention TItem="string" DataSource="@SizeData" Closing="@OnClosingHandler"></SfMention>
@code{
    protected List<string> SizeData = new List<string>() { "Small", "Medium", "Large" };
    public void OnClosingHandler(MentionClosingEventArgs args) {
        args.Cancel = true;
    }
  }

Created

Provides information about the Created event callback.

Declaration
[Parameter]
public EventCallback<object> Created { get; set; }
Property Value
Type Description
EventCallback<object>

An event callback function.

CssClass

Gets or sets the class/multiple classes separated by a space for the SfMention<TItem> component.

Declaration
[Parameter]
public string CssClass { get; set; }
Property Value
Type Description
string

Accepts a CSS class string separated by space to include for SfMention<TItem> popup element. The default value is String.Empty.
Examples
<SfMention CssClass="custom-mention" DataSource="@SizeData">
  <TargetComponent>
    <div id="mentionTarget" ></div>
  </TargetComponent>
</SfMention> 
<style>
   #mentionTarget {
      border: 2px solid grey;
      min-height: 200px;
   }
   .custom-mention .e-dropdownbase .e-list-item.e-active {
      color: #eec5d2;
   }
</style>
@code{
   protected List<string> SizeData = new List<string>() { "Small", "Medium", "Large" };
}

Destroyed

Provides information about the Destroyed event callback.

Declaration
[Parameter]
public EventCallback<object> Destroyed { get; set; }
Property Value
Type Description
EventCallback<object>

An event callback function.

DisplayTemplate

Gets or sets a template that defines how the selected value will be displayed in the editable component. The TItem" is passed as a context to the template, allowing it to access information about the suggested item, such as its Value and Text.

Declaration
[Parameter]
public RenderFragment<TItem> DisplayTemplate { get; set; }
Property Value
Type Description
RenderFragment<TItem>

The template content. The default value is null.
Examples
<SfMention TItem="EmployeeData" Query="@Query" PopupWidth="250px">
    <TargetComponent>
       <div id="mentionTarget" ></div>
    </TargetComponent>
    <DisplayTemplate>
       <span class='name'>@@@((context as EmployeeData).FirstName)</span>
    </DisplayTemplate>
    <ChildContent>
        <SfDataManager Url="https://ej2services.syncfusion.com/production/web-services/api/Orders" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>
        <MentionFieldSettings Value="ShipCity" Text="ShipName"></MentionFieldSettings>
    </ChildContent>
</SfMention> 
<style>
   #mentionTarget {
      border: 2px solid grey;
      min-height: 200px;
   }
</style>
@code{
   public class EmployeeData
   {
        public string FirstName { get; set; }
        public string Country { get; set; }
   }
   public EmployeeData Data = new EmployeeData();
   public Query Query = new Query();
}

FilterType

Gets or sets the filter type that specifies the match criteria while searching for mentions. The possible values for the FilterType property are:

  • StartsWithlists the items if the start of the text in the item matches with the search term or input string.
  • EndsWithlists the items if the end of the text in the item matches with the search term or input string.
  • Containslists the items if the item text contains the search term or input string.
Declaration
[Parameter]
public override FilterType FilterType { get; set; }
Property Value
Type Description
FilterType

One of the FilterType enumeration that specifies the match criteria while searching. The default value is Contains.
Overrides
Examples
<SfMention FilterType="FilterType.Contains" DataSource="@SizeData">
  <TargetComponent>
    <div id="mentionTarget" ></div>
  </TargetComponent>
</SfMention> 
<style>
   #mentionTarget {
      border: 2px solid grey;
      min-height: 200px;
   }
</style>
@code{
   protected List<string> SizeData = new List<string>() { "Small", "Medium", "Large" };
}

Filtering

Provides information about the Filtering event callback.

Declaration
[Parameter]
public EventCallback<MentionFilteringEventArgs<TItem>> Filtering { get; set; }
Property Value
Type Description
EventCallback<MentionFilteringEventArgs<TItem>>

An event callback function.
Examples
<SfMention TItem="string" DataSource="@SizeData" Filtering="@OnFilteringHandler"></SfMention>
@code{
    protected List<string> SizeData = new List<string>() { "Small", "Medium", "Large" };
    public async Task OnFilteringHandler(MentionFilteringEventArgs args) {

    }
  }

Highlight

Gets or sets whether to highlight the searched characters on suggestion list items.

Declaration
[Parameter]
public bool Highlight { get; set; }
Property Value
Type Description
bool

true, enable the highlighting of the searched characters in the suggestions list. The default value is false.

ID

Gets or sets the id of the SfMention<TItem> component.

Declaration
[Parameter]
public string ID { get; set; }
Property Value
Type Description
string

It sets the unique ID for the SfMention<TItem> component.

MentionChar

Gets or sets the symbol or single character which triggers the search action in the SfMention<TItem> component. The SfMention component listens to user input on the Target element displays suggestions as soon as the user enters the mention character.

Declaration
[Parameter]
public char MentionChar { get; set; }
Property Value
Type Description
char

A character of symbol. By default, the trigger character is the @ symbol..
Examples
<SfMention MentionChar='#' DataSource="@SizeData">
  <TargetComponent>
    <div id="mentionTarget" ></div>
  </TargetComponent>
</SfMention>
<style>
   #mentionTarget {
      border: 2px solid grey;
      min-height: 200px;
   }
</style>
@code{
   protected List<string> SizeData = new List<string>() { "Small", "Medium", "Large" };
}

MinLength

Gets or sets the minimum length of user input that is required to initiate the search action.

Declaration
[Parameter]
public int MinLength { get; set; }
Property Value
Type Description
int

The minimum number of characters user input that is required to initiate the search action.The default value is 0.
Remarks

By default, the SfMention<TItem> component will initiate a search as soon as the user begins typing in the editable element. You can change this behavior by setting the MinLength property.

Examples

For example, if you wanted to require the user to enter at least 3 characters before a search is initiated, you could use the following code:

<SfMention MinLength=3 DataSource="@SizeData">
  <TargetComponent>
    <div id="mentionTarget" ></div>
  </TargetComponent>
</SfMention> 
<style>
   #mentionTarget {
      border: 2px solid grey;
      min-height: 200px;
   }
</style>
@code{
   protected List<string> SizeData = new List<string>() { "Small", "Medium", "Large" };
}

OnActionBegin

Provides information about the OnActionBegin event callback.

Declaration
[Parameter]
public EventCallback<ActionBeginEventArgs> OnActionBegin { get; set; }
Property Value
Type Description
EventCallback<ActionBeginEventArgs>

An event callback function.
Remarks

You can prevent the action using Cancel.

Examples
<SfMention TItem="string" DataSource="@SizeData" OnActionBegin="@OnActionBeginHandler"></SfMention>
@code{
    protected List<string> SizeData = new List<string>() { "Small", "Medium", "Large" };
    public void OnActionBeginHandler(ActionBeginEventArgs args) {
        args.Cancel = true;
    }
  }

OnActionComplete

Provides information about the OnActionComplete event callback.

Declaration
[Parameter]
public EventCallback<ActionCompleteEventArgs<TItem>> OnActionComplete { get; set; }
Property Value
Type Description
EventCallback<ActionCompleteEventArgs<TItem>>

An event callback function.
Examples
<SfMention TItem="string" DataSource="@SizeData" OnActionComplete="@OnActionCompleteHandler"></SfMention>
@code{
    protected List<string> SizeData = new List<string>() { "Small", "Medium", "Large" };
    public void OnActionCompleteHandler(ActionBeginEventArgs<string> args) {
        args.Cancel = true;
    }
  }

OnActionFailure

Provides information about the OnActionFailure event callback.

Declaration
[Parameter]
public EventCallback<Exception> OnActionFailure { get; set; }
Property Value
Type Description
EventCallback<Exception>

An event callback function.

Opened

Provides information about the Opened event callback.

Declaration
[Parameter]
public EventCallback<object> Opened { get; set; }
Property Value
Type Description
EventCallback<object>

An event callback function.

Opening

Provides information about the Opening event callback.

Declaration
[Parameter]
public EventCallback<MentionOpeningEventArgs> Opening { get; set; }
Property Value
Type Description
EventCallback<MentionOpeningEventArgs>

An event callback function.
Remarks

You can prevent the popup open action using MentionOpeningEventArgs.Cancel.

Examples
<SfMention TItem="string" DataSource="@SizeData" Opening="@OnOpeningHandler"></SfMention>
@code{
    protected List<string> SizeData = new List<string>() { "Small", "Medium", "Large" };
    public void OnOpeningHandler(MentionOpeningEventArgs args) {
        args.Cancel = true;
    }
  }

PopupHeight

Gets or sets the popup's height value in pixels/number/percentage. If a number value is specified, it will be treated as pixels.

Declaration
[Parameter]
public string PopupHeight { get; set; }
Property Value
Type Description
string

Accepts PopupHeight property accepts a value in pixels, number, or percentage. The default value is 300px.
Examples

For example, if you wanted to set the height of the popup to 200 pixels, you could use the following code:

<SfMention PopupHeight="200px" DataSource="@SizeData">
  <TargetComponent>
    <div id="mentionTarget" ></div>
  </TargetComponent>
</SfMention> 
<style>
   #mentionTarget {
      border: 2px solid grey;
      min-height: 200px;
   }
</style>
@code{
   protected List<string> SizeData = new List<string>() { "Small", "Medium", "Large" };
}

PopupWidth

Gets or sets the popup's width value in pixels/number/percentage. If a number value is specified, it will be treated as pixels.

Declaration
[Parameter]
public string PopupWidth { get; set; }
Property Value
Type Description
string

Accepts PopupWidth property accepts a value in pixels, number, or percentage. The default value is auto.
Examples

For example, if you wanted to set the width of the popup to 250 pixels, you could use the following code:

<SfMention PopupWidth="250px" DataSource="@SizeData">
  <TargetComponent>
    <div id="mentionTarget" ></div>
  </TargetComponent>
</SfMention> 
<style>
   #mentionTarget {
      border: 2px solid grey;
      min-height: 200px;
   }
</style>
@code{
   protected List<string> SizeData = new List<string>() { "Small", "Medium", "Large" };
}

RequireLeadingSpace

Gets or sets a value indicating whether a leading space is required before the mention character to trigger the suggestion popup in the Mention component.

Declaration
[Parameter]
public bool RequireLeadingSpace { get; set; }
Property Value
Type Description
bool

true if a leading space is required to trigger the suggestion popup; otherwise, false. The default value is true.
Remarks
  • When RequireLeadingSpace is set to true, the suggestion popup will appear only if the mention character is preceded by a space. For example, typing "@John" will not trigger the popup unless a space precedes the "@" character.
  • When RequireLeadingSpace is set to false, the suggestion popup will trigger immediately after detecting the mention character, regardless of the preceding characters.
  • For backward compatibility, the property defaults to true, ensuring existing applications behave as expected.
Examples
<SfMention TValue="string" MentionChar="@" RequireLeadingSpace="false" DataSource="@UserList"> 
</SfMention> 

@code { 
    private List<string> UserList = new List<string> { "John Doe", "Jane Smith", "Alice Brown" }; 
}

ShowMentionChar

Gets or sets whether to show the MentionChar along with with the text when displaying selected mention item in target.

Declaration
[Parameter]
public bool ShowMentionChar { get; set; }
Property Value
Type Description
bool

true, the selected mention item displayed along with the mention character. The default value is false.
Remarks

If ShowMentionChar is set to true, the mention component will display the mention character along with the text of the mentioned item. For example, if the mention character is @ and the user mentions the item "John Doe", the mention will be displayed as @John Doe.

SpinnerTemplate

Gets or sets a template that defines the appearance of the loading initiator in the popup. This template is displayed until the data for the suggestions has been loaded.

Declaration
[Parameter]
public RenderFragment SpinnerTemplate { get; set; }
Property Value
Type Description
RenderFragment

The template content. The default value is null.
Examples
<SfMention TItem="EmployeeData" Query="@Query" PopupWidth="250px">
    <TargetComponent>
        <div id="mentionTarget" ></div>
    </TargetComponent>
    <SpinnerTemplate>
        <div class="spinner_loader"></div>
     </SpinnerTemplate>
    <ChildContent>
        <SfDataManager Url="https://ej2services.syncfusion.com/production/web-services/api/Orders" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>
        <MentionFieldSettings Value="ShipCity" Text="ShipName"></MentionFieldSettings>
    </ChildContent>
</SfMention> 
<style>
   #mentionTarget {
      border: 2px solid grey;
      min-height: 200px;
   }
</style>
@code{
   public class EmployeeData
   {
        public string FirstName { get; set; }
        public string Country { get; set; }
   }
   public EmployeeData Data = new EmployeeData();
   public Query Query = new Query();
}

SuffixText

Gets or sets the custom suffix that will be appended to the end of the mentioned item's text when it is inserted into the target editor.

Declaration
[Parameter]
public string SuffixText { get; set; }
Property Value
Type Description
string

Accepts SuffixText as string value. The default value is String.Empty.
Remarks

When a item is selected, the SfMention<TItem> component will automatically insert the text of the mentioned item into the target editor. By default, the mention component will insert the text of the mentioned item without any additional text or characters. However, you can specify a custom suffix that will be appended to the end of the mentioned item's text when it is inserted into the target editor.

Examples
<SfMention SuffixText="&nbsp;" DataSource="@SizeData">
  <TargetComponent>
    <div id="mentionTarget" ></div>
  </TargetComponent>
</SfMention> 
<style>
   #mentionTarget {
      border: 2px solid grey;
      min-height: 200px;
   }
</style>
@code{
   protected List<string> SizeData = new List<string>() { "Small", "Medium", "Large" };
}

SuggestionCount

Gets or sets the maximum number of items that will be displayed in the suggestion list.

Declaration
[Parameter]
public int SuggestionCount { get; set; }
Property Value
Type Description
int

The maximum number of items that will be displayed in the suggestion list. The default value is 25.
Examples
<SfMention SuggestionCount=15 DataSource="@SizeData">
  <TargetComponent>
    <div id="mentionTarget" ></div>
  </TargetComponent>
</SfMention> 
<style>
   #mentionTarget {
      border: 2px solid grey;
      min-height: 200px;
   }
</style>
@code{
   protected List<string> SizeData = new List<string>() { "Small", "Medium", "Large" };
}

Target

Gets or sets the target selector for displaying the SfMention<TItem> component. The SfMention component listens to user input on the target element displays suggestions as soon as the user enters the mention character. This allows users to easily select items from the list of suggestions by typing the mention character and then selecting an item from the list.

Declaration
[Parameter]
public string Target { get; set; }
Property Value
Type Description
string

An element on the page should be used as the target for the SfMention component, so that mention component displays suggestion list opens relative to the elements cursor position.
Remarks

The Target property is required and must be specified.

Examples
<SfMention DataSource="@SizeData">
<TargetComponent>
    <div id="mentionTarget" ></div>
</TargetComponent>
</SfMention>
<style>
   #mentionTarget {
      border: 2px solid grey;
      min-height: 200px;
   }
</style>
@code{
   protected List<string> SizeData = new List<string>() { "Small", "Medium", "Large" };
}

TargetComponent

Gets or sets the target component for displaying the SfMention<TItem> component. The SfMention component listens to user input on the target component displays suggestions as soon as the user enters the mention character. This allows users to easily select items from the list of suggestions by typing the mention character and then selecting an item from the list.

Declaration
[Parameter]
public RenderFragment TargetComponent { get; set; }
Property Value
Type Description
RenderFragment

The template content. The default value is null.
Remarks

SfMention<TItem> is attached to the first element of the TargetComponent.

Examples
<div id="mentionTarget" ></div>
<SfMention TItem="EmployeeData" Query="@Query" PopupWidth="250px">
    <TargetComponent>
       <div id="mentionTarget"></div>
    </TargetComponent>
    <ChildContent>
        <SfDataManager Url="https://ej2services.syncfusion.com/production/web-services/api/Orders" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>
        <MentionFieldSettings Value="ShipCity" Text="ShipName"></MentionFieldSettings>
    </ChildContent>
</SfMention> 
<style>
   #mentionTarget {
      border: 2px solid grey;
      min-height: 200px;
   }
</style>
@code{
   public class EmployeeData
   {
        public string FirstName { get; set; }
        public string Country { get; set; }
   }
   public EmployeeData Data = new EmployeeData();
   public Query Query = new Query();
}

ValueSelected

Provides information about the ValueSelected event callback.

Declaration
[Parameter]
public EventCallback<MentionValueSelectedEventArgs<TItem>> ValueSelected { get; set; }
Property Value
Type Description
EventCallback<MentionValueSelectedEventArgs<TItem>>

An event callback function.
Remarks

This event triggers when an item in a popup is selected or when the model value is changed by user.

Examples
<SfMention TItem="string" DataSource="@SizeData" ValueSelected="@OnValueSelectedHandler"></SfMention>
@code{
    protected List<string> SizeData = new List<string>() { "Small", "Medium", "Large" };
    public void OnValueSelectedHandler(MentionValueSelectedEventArgs<TItem> args) {

    }
  }

ValueSelecting

Provides information about the ValueSelecting event callback.

Declaration
[Parameter]
public EventCallback<MentionValueSelectingEventArgs<TItem>> ValueSelecting { get; set; }
Property Value
Type Description
EventCallback<MentionValueSelectingEventArgs<TItem>>

An event callback function.
Remarks

You can prevent the item selection action using Cancel.

Examples
<SfMention TItem="string" DataSource="@SizeData" ValueSelecting="@OnValueSelectingHandler"></SfMention>
@code{
    protected List<string> SizeData = new List<string>() { "Small", "Medium", "Large" };
    public void OnValueSelectingHandler(MentionValueSelectingEventArgs<string> args) {
        if(args.ItemData== "Medium")
            args.Cancel = true;
    }
  }

Methods

ActionBeginAsync(IEnumerable<TItem>, Query?)

Task which performs the action begin event.

Declaration
protected override Task<ActionBeginEventArgs> ActionBeginAsync(IEnumerable<TItem> dataSource, Query? query = null)
Parameters
Type Name Description
IEnumerable<TItem> dataSource

Specifies the datasource.
Query query

Specifies the query.
Returns
Type Description
Task<ActionBeginEventArgs>

Task.
Overrides

ActionCompleteAsync(IEnumerable<TItem>, Query?)

Task which performs the action complete event.

Declaration
protected override Task ActionCompleteAsync(IEnumerable<TItem> dataSource, Query? query = null)
Parameters
Type Name Description
IEnumerable<TItem> dataSource

Specifies the datasource.
Query query

Specifies the query.
Returns
Type Description
Task

Task.
Overrides

ActionFailureAsync(object)

Task which performs the action failure event.

Declaration
protected override Task ActionFailureAsync(object arguments)
Parameters
Type Name Description
object arguments

Specifies the object arguments.
Returns
Type Description
Task

Task.
Overrides

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
RenderTreeBuilder __builder
Overrides

DisableItem(int)

Method to disable a specific item in the popup based on its index position.

Declaration
public Task DisableItem(int item)
Parameters
Type Name Description
int item

The index of the item to be disabled.
Returns
Type
Task
Remarks

This method disables a specific item in the popup based on the provided item. If the item is of type int, it represents the index of the item in the popup.

DisableItem(TItem)

Method to disable a specific item in the popup using its TItem.

Declaration
public Task DisableItem(TItem item)
Parameters
Type Name Description
TItem item

The object of the item to be disabled.
Returns
Type
Task
Remarks

This method disables a specific item in the popup based on the provided item. If the item is of type TItem, it represents the item.

FilterAsync(IEnumerable<TItem>, Query, MentionFieldSettings)

To filter the data from given data source by using query.

Declaration
public Task FilterAsync(IEnumerable<TItem> dataSource, Query query = null, MentionFieldSettings fields = null)
Parameters
Type Name Description
IEnumerable<TItem> dataSource

Specifies the data source.
Query query

Specifies the query.
MentionFieldSettings fields

Specifies the fields.
Returns
Type Description
Task

Task.

GetItemData(TItem?)

Method which gets item data.

Declaration
protected MentionItemModel GetItemData(TItem? item = default)
Parameters
Type Name Description
TItem item

Specifies the item.
Returns
Type Description
MentionItemModel

Task.

GetQuery(Query)

Task which gets the query.

Declaration
protected override Query GetQuery(Query query)
Parameters
Type Name Description
Query query

Specifies the query.
Returns
Type Description
Query

Query.
Overrides

HidePopupAsync()

To hide the suggestion list in the SfMention<TItem> component.

Declaration
[JSInvokable]
public Task HidePopupAsync()
Returns
Type Description
Task

Task.

InvokeBeforeOpen()

Triggers before popup get opened.

Declaration
protected virtual Task<bool> InvokeBeforeOpen()
Returns
Type Description
Task<bool>

Task.

ListItemCreated(ListOptions<TItem>)

Task which specifies the list item created event.

Declaration
protected override ListOptions<TItem> ListItemCreated(ListOptions<TItem> listItem)
Parameters
Type Name Description
ListOptions<TItem> listItem

Specifies the list item.
Returns
Type Description
ListOptions<TItem>

ListOptions.
Overrides

OnAfterRenderAsync(bool)

Triggers after each time the component has been rendered.

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
bool firstRender

true if the component rendered for the first time.
Returns
Type Description
Task

Task.
Overrides

OnInitializedAsync()

Triggers while initial rendering of the component.

Declaration
protected override Task OnInitializedAsync()
Returns
Type Description
Task

Task.
Overrides
Syncfusion.Blazor.DropDowns.SfDropDownBase<TItem>.OnInitializedAsync()

OnParametersSetAsync()

Triggers when any changes in component state occurs.

Declaration
protected override Task OnParametersSetAsync()
Returns
Type Description
Task

Task.
Overrides
Syncfusion.Blazor.DropDowns.SfDropDownBase<TItem>.OnParametersSetAsync()

RenderEqualItemsAsync()

Update the custom value to the list

Declaration
protected Task RenderEqualItemsAsync()
Returns
Type Description
Task

Task.

SearchAsync(string, string, string)

The method for displaying a suggestion list based on position X and Y values and text.

Declaration
public Task SearchAsync(string text, string positionX, string positionY)
Parameters
Type Name Description
string text

Specify the search character.
string positionX

Specify the popup X position.
string positionY

Specify the popup Y position.
Returns
Type Description
Task

Task.

ShowPopupAsync()

To display the suggestion list in the SfMention<TItem> component.

Declaration
public Task ShowPopupAsync()
Returns
Type Description
Task

Task.

UpdateDisableItem(TItem)

Updates the disabled status of a given item in the list.

Declaration
protected void UpdateDisableItem(TItem itemData)
Parameters
Type Name Description
TItem itemData

The item to be updated.
Remarks

This method checks if the given item is not null and if it's not disabled. If so, it sets the disabled field of the item to true. It then updates the item in the ListData and disables the corresponding list item in the ListDataSource. If the item to be disabled is currently selected, it updates the value selection asynchronously.

Implements