Syncfusion.Blazor.DropDowns.SfDropDownBase<TItem>.HighlightSearch(System.String, System.String, System.Boolean, Syncfusion.Blazor.DropDowns.FilterType)

Syncfusion.Blazor.DropDowns.SfDropDownBase<TItem>.IncrementalSearch(System.String, System.Collections.Generic.IEnumerable<TItem>, System.Nullable<System.Int32>, System.Boolean)

Syncfusion.Blazor.DropDowns.SfDropDownBase<TItem>.IsActionFailed

Syncfusion.Blazor.DropDowns.SfDropDownBase<TItem>.IsMinimalData

Syncfusion.Blazor.DropDowns.SfDropDownBase<TItem>.ItemData

Syncfusion.Blazor.DropDowns.SfDropDownBase<TItem>.ListDataSource

Syncfusion.Blazor.DropDowns.SfDropDownBase<TItem>.MainData

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

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

Syncfusion.Blazor.DropDowns.SfDropDownBase<TItem>.RefreshVirtualIndices()

Syncfusion.Blazor.DropDowns.SfDropDownBase<TItem>.RenderItemsAsync(System.Collections.Generic.IEnumerable<TItem>)

Syncfusion.Blazor.DropDowns.SfDropDownBase<TItem>.RenderListItemsAsync(System.Collections.Generic.IEnumerable<TItem>, Syncfusion.Blazor.DropDowns.FieldSettingsModel, Syncfusion.Blazor.Data.Query)

Syncfusion.Blazor.DropDowns.SfDropDownBase<TItem>.Search(System.String, System.Collections.Generic.IEnumerable<TItem>, System.String, System.Boolean)

Syncfusion.Blazor.DropDowns.SfDropDownBase<TItem>.SetListDataAsync(System.Collections.Generic.IEnumerable<TItem>, Syncfusion.Blazor.DropDowns.FieldSettingsModel, Syncfusion.Blazor.Data.Query)

Syncfusion.Blazor.DropDowns.SfDropDownBase<TItem>.TotalCount

Syncfusion.Blazor.DropDowns.SfDropDownBase<TItem>.UpdateListHeight(System.Double)

Syncfusion.Blazor.DropDowns.SfDropDownBase<TItem>.VirtualAction

Namespace: Syncfusion.Blazor.DropDowns

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfDropDownList<TValue, TItem> : SfDropDownBase<TItem>, IInputBase, IDropDowns, IVirtualList<TItem>

Type Parameters

Name	Description
TValue	Specifies the type of the value the DropDownList holds or returns.
TItem	Specifies the data type for each item in the dropdown list.

Remarks

This component supports data binding, filtering, grouping, and multiple display customizations for single-selection scenarios. For usage examples, see "https://blazor.syncfusion.com/documentation/dropdown-list/getting-started".

Examples

In the following code example, a basic DropDownList component is initialized with simple list items.

<SfDropDownList TItem="string" TValue="string" DataSource="@MyList">
</SfDropDownList>
@code{
    protected List<string> MyList = new List<string>() { "Small", "Medium", "Large" };
}

Example usage:

<SfDropDownList TValue="int" TItem="Employee" DataSource="@Employees" Placeholder="Select employee" @bind-Value="SelectedId" />

Constructors

SfDropDownList()

Declaration

public SfDropDownList()

Fields

ASSERTIVE

specifies the assertive string.

Declaration

protected const string ASSERTIVE = "assertive"

Field Value

Type
System.String

BOTH

Declaration

protected const string BOTH = "both"

Field Value

Type
System.String

FALSE

Represents the string "false" often used for ARIA or accessibility attribute values.

Declaration

protected const string FALSE = "false"

Field Value

Type	Description
System.String	Always returns `"false"` string literal.

Remarks

Used internally for setting or checking ARIA-expanded and other accessibility attributes value.

NO_DATA

Gets the root CSS class for the DropDownList base component.

Declaration

protected const string NO_DATA = "e-content e-dropdownbase e-nodata"

Field Value

Type	Description
System.String	A System.String representing the base CSS class for the component: `"e-content e-dropdownbase e-nodata"`.

Remarks

Used to style the root node when there is no data available for the DropDownList.

TRUE

Represents the string "true" often used for ARIA or accessibility attribute values.

Declaration

protected const string TRUE = "true"

Field Value

Type	Description
System.String	Returns the string literal `"true"`.

Remarks

Used for accessibility, e.g. ARIA attributes.

Properties

AllowFiltering

Gets or sets a value that indicates whether the filtering option is enabled or not.

Declaration

public bool AllowFiltering { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the filtering option is enabled, displaying the filter bar (search box) in the pop-up; otherwise, `false`. The default value is `false`.

Remarks

When this property is set to true, the filter action retrieves matched items based on the characters typed in the search textbox, using the Filtering event.

AllowResize

Gets or sets a value indicating whether the resizing option is enabled for the drop-down popup.

Declaration

public bool AllowResize { get; set; }

Property Value

Type	Description
System.Boolean	`true` if resizing is enabled and allows the user to resize the popup by dragging its edges; otherwise, `false`. The default value is `false`.

Remarks

When AllowResize is set to true, a resizing handle appears at the bottom-right corner of the popup, enabling the end user to dynamically adjust the popup window size. This can improve user experience when the dropdown contains more items than can be displayed at once. The resizing events can be further customized using the OnResizeStart and OnResizeStop event callbacks.

Examples





@code {
    private void HandleResizeStart(object args) {
        Console.WriteLine("Resize started.");
    }

    private void HandleResizeStop(object args) {
        Console.WriteLine("Resize stopped.");
    }
}

ComponentName

Gets or sets the component name string, typically used for script interop and diagnostics.

Declaration

protected override string ComponentName { get; set; }

Property Value

Type	Description
System.String	A System.String containing the logical name of the component: `"SfDropDownList"`.

Overrides

Syncfusion.Blazor.DropDowns.SfDropDownBase<TItem>.ComponentName

Remarks

Used internally by Syncfusion Blazor infrastructure to reference this component type for JavaScript interactions and logging.

ContainerElementAttribute

Gets or sets the container element's attribute collection.

Declaration

protected Dictionary<string, object> ContainerElementAttribute { get; set; }

Property Value

Type	Description
System.Collections.Generic.Dictionary<System.String, System.Object>	A `Dictionary<string, object>` describing the attributes applied to the container element of the DropDownList.

Remarks

Used internally for ARIA/accessibility, tabindex, and other HTML attributes on the root container element.

ContainerElementClass

Gets or sets the container CSS class for the DropDownList component.

Declaration

protected string ContainerElementClass { get; set; }

Property Value

Type	Description
System.String	A System.String representing the CSS class for the DropDownList container element.

Remarks

The container element hosts the input element and popup; styles are applied using this value.

CssClass

Gets or sets one or more CSS classes to customize the appearance of the SfDropDownList<TValue, TItem> component.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	A string containing space-separated CSS classes. The default value is `String.Empty`.

Remarks

This property enables you to apply custom styles and class names for advanced design requirements beyond standard provided options. It is useful for integrating the drop-down with application-specific themes or branding.

DebounceDelay

Gets or sets the debounce delay in milliseconds for filtering operations in the SfDropDownList<TValue, TItem> component. Debounce delay is the required wait time after a user's last keystroke before a filtering action is triggered.

Declaration

public int DebounceDelay { get; set; }

Property Value

Type	Description
System.Int32	An integer representing the debounce delay, in milliseconds. The default is `300`.

Remarks

Setting DebounceDelay to a higher value reduces server requests with remote data or prevents rapid filtering for local data. Has effect only if AllowFiltering is enabled. To turn off debouncing and respond to every keystroke, set this value to zero.

Examples

The following example demonstrates how to set the DebounceDelay property to 500 milliseconds.

<SfDropDownList DebounceDelay="500" AllowFiltering="true"></SfDropDownList>

DropdownIcon

Gets or sets the collection of CSS classes that represent the displayed dropdown icon(s).

Declaration

protected List<string> DropdownIcon { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<System.String>	A `List<string>` containing the CSS class names for the dropdown's icon.

Remarks

Used for setting custom icons or changing their appearance via CSS.

Enabled

Gets or sets a value that indicates whether the SfDropDownList<TValue, TItem> component is enabled.

Declaration

public bool Enabled { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the Dropdown list component is enabled; otherwise, it is disabled. The default value is `true`.

Remarks

When set to false, the dropdown will render as disabled and will not respond to interaction or selection.

EnablePersistence

Gets or sets a value indicating whether to persist the component's state across browser page reloads. When enabled, the Value property is retained after reloading.

Declaration

public bool EnablePersistence { get; set; }

Property Value

Type	Description
System.Boolean	`true` if state persistence is enabled and the component's Value property is retained in browser local storage; otherwise, `false`. The default value is `false`.

Remarks

Enabling state persistence helps maintain the selected value and UI state upon reload. Internal logic stores and retrieves the relevant property in browser local storage.

EnableRtl

Gets or sets a value indicating whether right-to-left text direction is enabled for the SfDropDownList<TValue, TItem> component.

Declaration

public bool EnableRtl { get; set; }

Property Value

Type	Description
System.Boolean	`true` if right-to-left direction is enabled for UI text and layout; otherwise, `false`. The default value is `false`.

Remarks

Enable this property to support languages written from right to left, such as Arabic or Hebrew. All visual elements and alignments of the dropdown will adjust accordingly for better localization and accessibility.

EnableVirtualization

Gets or sets a value that enables virtual scrolling for the dropdown list items, improving rendering performance with large data sets.

Declaration

public bool EnableVirtualization { get; set; }

Property Value

Type	Description
System.Boolean	`true` to enable virtual scrolling for the dropdown list; `false` otherwise. The default is `false`.

Remarks

When enabled, only a subset of list items are rendered in the DOM at any time. This is recommended for performance with long lists.

FilterBarPlaceholder

Gets or sets the placeholder text displayed in the filter text box when it is empty and not focused.

Declaration

public string FilterBarPlaceholder { get; set; }

Property Value

Type	Description
System.String	A string value displayed as the placeholder in the filter textbox. The default value is `String.Empty`.

Remarks

This property is effective only when AllowFiltering is enabled. It improves user experience by guiding users about the filter functionality.

FilterInputObject

Gets or sets the filter input Syncfusion.Blazor.Inputs.Internal.SfInputBase reference for the DropDownList.

Declaration

protected SfInputBase FilterInputObject { get; set; }

Property Value

Type	Description
Syncfusion.Blazor.Inputs.Internal.SfInputBase	The filter Syncfusion.Blazor.Inputs.Internal.SfInputBase instance used during filtering.

Remarks

This property is used internally to access and manipulate the filter input of the control, mainly when AllowFiltering is enabled.

FloatLabelType

Gets or sets the floating label behavior for the dropdown list. The Placeholder text acts as the label when enabled.

Declaration

public FloatLabelType FloatLabelType { get; set; }

Property Value

Type	Description
FloatLabelType	A FloatLabelType enumeration value. The default value is Never.

Remarks

If set to Never, the placeholder does not float as a label. With Auto, placeholder floats as a label on focus. Always will keep the placeholder as a label at all times. Improves accessibility and guides users on form input expectation.

Examples

The following code example demonstrates setting the float label as Auto.

<SfDropDownList TItem="string" TValue="string" DataSource="@MyList" Placeholder="Select a value" FloatLabelType="FloatLabelType.Auto">
</SfDropDownList>
@code{
    protected List<string> MyList = new List<string>() { "Small", "Medium", "Large" };
}

FocusedListData

Gets or sets the currently focused list data item options.

Declaration

protected ListOptions<TItem> FocusedListData { get; set; }

Property Value

Type	Description
ListOptions<TItem>	An instance of ListOptions<T> representing the currently focused list item in the dropdown popup.

Remarks

This property is updated as user navigates the list using keyboard interactions.

FooterTemplate

Gets or sets the customized content that will be assigned to the footer container of the popup list.

Declaration

public RenderFragment FooterTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A Microsoft.AspNetCore.Components.RenderFragment value for the footer template. The default value is `null`.

Remarks

This property allows developers to display custom UI elements, such as summary or help text, at the bottom of the dropdown's popup list.

Examples

<SfDropDownList TItem="string" TValue="string" DataSource="@MyList">
    <DropDownListTemplates TItem="string">
        <FooterTemplate>
            <span class='footer'>Total list items: 3 </span>
        </FooterTemplate>
    </DropDownListTemplates>
</SfDropDownList>
@code{
    protected List<string> MyList = new List<string>() { "Small", "Medium", "Large" };
}

HeaderTemplate

Gets or sets the customized content that will be assigned to the header container of the popup list.

Declaration

public RenderFragment HeaderTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A Microsoft.AspNetCore.Components.RenderFragment value for the header template. The default value is `null`.

Remarks

Useful for adding custom UI (such as instructions, branding, or actions) to the dropdown header above the options list.

Examples

<SfDropDownList TItem="string" TValue="string" DataSource="@MyList">
    <DropDownListTemplates TItem="string">
        <HeaderTemplate>
            <span class='header'> T-shirt size </span>
        </HeaderTemplate>
    </DropDownListTemplates>
</SfDropDownList>
@code{
    protected List<string> MyList = new List<string>() { "Small", "Medium", "Large" };
}

HtmlAttributes

Gets or sets a collection of additional attributes such as styles, classes, or custom attributes to be applied to the dropdown list element.

Declaration

public Dictionary<string, object> HtmlAttributes { get; set; }

Property Value

Type	Description
System.Collections.Generic.Dictionary<System.String, System.Object>	A System.Collections.Generic.Dictionary<, > representing additional attributes. The default value is `null`.

Remarks

Use this property to include HTML attributes like style, class, and custom attributes using the Blazor @attributes support. Duplicate attributes are merged at runtime.

Examples

<SfDropDownList TItem="string" TValue="string" DataSource="@MyList" HtmlAttributes="@CustomAttribute">
</SfDropDownList>
@code{
    protected List<string> MyList = new List<string>() { "Small", "Medium", "Large" };
    Dictionary<string, object> CustomAttribute = new Dictionary<string, object>()
    {
        { "title", "Select T-shirt size" }
    };
}

ID

Gets or sets the unique identifier for the DropDownListEvents<TValue, TItem> component.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	A string value that specifies the unique identifier for the component. The default value is `String.Empty`.

Remarks

This property allows you to assign a unique identifier to a SfDropDownList<TValue, TItem> instance. Ensure that the ID is unique within the application to avoid conflicts in client-side interactivity and accessibility features.

IncrementalListData

Declaration

protected IEnumerable<TItem> IncrementalListData { get; set; }

Property Value

Type
System.Collections.Generic.IEnumerable<TItem>

Index

Gets or sets the zero-based index of the currently selected item in the dropdown list component.

Declaration

public Nullable<int> Index { get; set; }

Property Value

Type	Description
System.Nullable<System.Int32>	An integer representing the index of the selected item. The default value is `null`, which means no item is selected.

Remarks

This property allows determining or setting which item is currently selected by its index, supporting scenarios such as restoring user selection or direct selection sync.

Exceptions

Type	Condition
System.ArgumentOutOfRangeException	Thrown if the index is set to a value less than -1 or greater than the number of items present in the dropdown list at render time.

IndexChanged

Gets or sets an event callback that is triggered when the Index property value changes in the dropdown list.

Declaration

public EventCallback<Nullable<int>> IndexChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Nullable<System.Int32>>	An `EventCallback<Nullable<Int32>>` that will be invoked when the index changes. Used for two-way binding scenarios.

Remarks

The event allows parent components to respond and update state as the selected index changes, enabling reactive forms or conditional views.

InputAttributes

Gets or sets a collection of additional attributes, such as disabled, value, or custom input attributes, to be applied to the input element within the dropdown list.

Declaration

public Dictionary<string, object> InputAttributes { get; set; }

Property Value

Type	Description
System.Collections.Generic.Dictionary<System.String, System.Object>	A System.Collections.Generic.Dictionary<, > representing the additional input element attributes. The default value is an empty dictionary.

Remarks

If both the property and the input attribute are configured, the property value takes precedence. Use this property for cases requiring direct HTML attribute setting on the input element, such as disabling autocomplete or setting data-* attributes.

InputBaseObject

Gets or sets the input base object reference for the DropDownList.

Declaration

protected SfInputBase InputBaseObject { get; set; }

Property Value

Type	Description
Syncfusion.Blazor.Inputs.Internal.SfInputBase	A Syncfusion.Blazor.Inputs.Internal.SfInputBase instance representing the input element associated with this DropDownList.

Remarks

This property links the DropDownList to its underlying input element, which is used for rendering and value management internally.

IsAutoComplete

Declaration

protected bool IsAutoComplete { get; set; }

Property Value

Type
System.Boolean

IsBeforePopupOpen

Gets or sets a value indicating whether the popup is about to be opened.

Declaration

protected bool IsBeforePopupOpen { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the popup is about to open; otherwise, `false`.

Remarks

Used to track the state before the popup is displayed for precise event management.

IsComboBox

Declaration

protected bool IsComboBox { get; set; }

Property Value

Type
System.Boolean

IsDropDownList

Declaration

protected bool IsDropDownList { get; set; }

Property Value

Type
System.Boolean

IsFocusing

Declaration

protected bool IsFocusing { get; set; }

Property Value

Type
System.Boolean

IsIncrementalRequest

Declaration

protected bool IsIncrementalRequest { get; set; }

Property Value

Type
System.Boolean

IsPopupFirstRender

Declaration

protected bool IsPopupFirstRender { get; set; }

Property Value

Type
System.Boolean

IsPopupShown

Declaration

protected bool IsPopupShown { get; set; }

Property Value

Type
System.Boolean

IsTabKeyAction

Declaration

protected bool IsTabKeyAction { get; set; }

Property Value

Type
System.Boolean

KeyAction

Declaration

protected KeyActions KeyAction { get; set; }

Property Value

Type
KeyActions

NoDataContent

Gets or sets the content to display when there are no data records available in the dropdown.

Declaration

protected string NoDataContent { get; set; }

Property Value

Type	Description
System.String	A System.String to show in the popup when the data source is empty or no items are available.

Remarks

This property is used to display "No Records Found" or similar messages in the dropdown list body.

Placeholder

Gets or sets the placeholder text that is displayed in the dropdown list input when no value is selected and the control is not focused.

Declaration

public string Placeholder { get; set; }

Property Value

Type	Description
System.String	A string value for the placeholder text. The default is `String.Empty`.

Remarks

The appearance and behavior of the placeholder is determined by the FloatLabelType property.

PopupContent

Gets or sets the template content to be displayed in the DropDownList popup.

Declaration

protected string PopupContent { get; set; }

Property Value

Type	Description
System.String	A System.String containing the HTML or markup to render as the popup's content.

Remarks

Allows custom content to be displayed when showing the popup (such as when using templates or grouped data).

PopupDisplayMode

Gets or sets the display mode of the dropdown popup on mobile devices. This controls whether the popup opens in fullscreen mode or inline, based on device type and filtering state.

Declaration

public PopupDisplayMode PopupDisplayMode { get; set; }

Property Value

Type	Description
PopupDisplayMode	A PopupDisplayMode enumeration value. The default value is FullScreen.

Remarks

The PopupDisplayMode property defines how the dropdown popup is rendered on mobile devices:

FullScreen: Popup will open in fullscreen mode on mobile when filtering is enabled. This applies to both SfDropDownList<TValue, TItem> and SfMultiSelect<TValue, TItem> components with checkbox filtering enabled.
Inline: Popup opens above the input, without fullscreen effect, for a consistent experience on both mobile and desktop.

Adjust this property to ensure the dropdown behaves as intended on all device form factors.

Examples

The following example demonstrates how to use the PopupDisplayMode property:

DropdownList with PopupDisplayMode set to Inline
<SfDropDownList TValue="string" DataSource="@Data" PopupDisplayMode="PopupDisplayMode.Inline">
    <DropDownListFieldSettings Text="Text" Value="Id"></DropDownListFieldSettings>
</SfDropDownList>

@code {
    public List<DropDownData> Data { get; set; } = new List<DropDownData>
    {
        new DropDownData { Id = "1", Text = "Option 1" },
        new DropDownData { Id = "2", Text = "Option 2" },
        new DropDownData { Id = "3", Text = "Option 3" }
    };

    public class DropDownData
    {
        public string Id { get; set; }
        public string Text { get; set; }
    }
}

PopupHeight

Gets or sets the height of the popup portion of the dropdown list.

Declaration

public string PopupHeight { get; set; }

Property Value

Type	Description
System.String	A string value specifying the preferred height, such as in pixels (e.g., "300px") or percentage (e.g., "50%"). The default value is `300px`.

Remarks

Supports both fixed (px) and relative (%) units to match the dropdown's layout requirements.

PopupWidth

Gets or sets the width of the popup portion of the dropdown list. By default, this matches the width of the parent SfDropDownList<TValue, TItem>.

Declaration

public string PopupWidth { get; set; }

Property Value

Type	Description
System.String	A string value representing the width, such as "200px" or "50%". The default value is `100%`.

Remarks

Change this property to control the popup's width relative to the component or its parent container.

PreventAutoFillAction

Gets or sets a value that indicates whether autofill behavior should be prevented in the DropDownList input.

Declaration

protected bool PreventAutoFillAction { get; set; }

Property Value

Type	Description
System.Boolean	`true` to prevent autofill; otherwise, `false`.

Remarks

Useful when dealing with browser autofill on input controls within complex layouts.

PreventIconHandler

Gets or sets a value indicating whether the icon event handler should be prevented from executing.

Declaration

protected bool PreventIconHandler { get; set; }

Property Value

Type	Description
System.Boolean	`true` to prevent handling of icon events; otherwise, `false`.

Remarks

Used to disable certain icon interactions under specific conditions.

PreviousItemData

Gets or sets the item data associated with the previous value selection.

Declaration

protected TItem PreviousItemData { get; set; }

Property Value

Type	Description
TItem	The data item of type `TItem` corresponding to the previously selected value.

Remarks

Used to track what was selected before the current choice, for scenarios like validation or change event argument construction.

PreviousValue

Gets or sets the previously selected value of the DropDownList.

Declaration

protected TValue PreviousValue { get; set; }

Property Value

Type	Description
TValue	The value of type `TValue` previously selected by the user.

Remarks

This property is updated whenever the selection changes, keeping a reference to the prior value for validation or event processing.

Readonly

Gets or sets a value indicating whether the SfDropDownList<TValue, TItem> component operates in read-only mode.

Declaration

public bool Readonly { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the dropdown list is in read-only mode and cannot be edited; otherwise, `false`. The default is `false`.

Remarks

In read-only mode, the dropdown list is non-interactive; the popup cannot be opened and the value cannot be changed by the user. Useful for locking selections without removing the visual.

RootElementClass

Gets or sets the root CSS class for the DropDownList component.

Declaration

protected string RootElementClass { get; set; }

Property Value

Type	Description
System.String	A System.String containing the root CSS class of the component. Default is `null` until set by Syncfusion.Blazor.DropDowns.SfDropDownList<TValue, TItem>.PreRender().

Remarks

This property determines the main wrapper class applied to the DropDownList root HTML element.

ROOTNODECLASS

Gets or sets the root class name used for the DropDownList component.

Declaration

protected virtual string ROOTNODECLASS { get; set; }

Property Value

Type	Description
System.String	A System.String of CSS classes representing the default root node styling for the DropDownList: `"e-control e-dropdownlist e-lib"`.

Remarks

This CSS class group provides the starting styles for the Dropdown rendering.

ShowClearButton

Gets or sets a value indicating whether a clear button is shown in the dropdown list, allowing users to clear the selected value.

Declaration

public virtual bool ShowClearButton { get; set; }

Property Value

Type	Description
System.Boolean	`true` to show the clear button in the dropdown list input; otherwise, `false`. Default is `false`.

Remarks

When the clear button is clicked, the Value and Index properties are reset to null. Use this to enable quick user deselection.

TabIndex

Gets or sets the position of the SfDropDownList<TValue, TItem> component within the logical tab order of the page.

Declaration

public int TabIndex { get; set; }

Property Value

Type	Description
System.Int32	An integer value representing the tab order; the default value is `0`.

Remarks

Adjust to integrate with custom form flows or to comply with accessibility requirements.

TokenSource

Declaration

protected CancellationTokenSource TokenSource { get; set; }

Property Value

Type
System.Threading.CancellationTokenSource

TypedString

Gets or sets the string value typed by the user for filtering.

Declaration

protected string TypedString { get; set; }

Property Value

Type	Description
System.String	A System.String representing the user's current input in the filter textbox. Default is `string.Empty`.

Remarks

This property is used primarily during the filtering process, tracking the user's typed text.

Value

Gets or sets the value of the currently selected item in the dropdown list. Supports two-way binding.

Declaration

public TValue Value { get; set; }

Property Value

Type	Description
TValue	The value of the selected option, corresponding to the `TValue` generic type parameter. The default is `null`.

Remarks

Specifies or retrieves the currently selected value in the SfDropDownList<TValue, TItem> component. For most forms, this is the main property used to get and set user input.

ValueChanged

Gets or sets an event callback that is invoked when the Value changes.

Declaration

public EventCallback<TValue> ValueChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<TValue>	An Microsoft.AspNetCore.Components.EventCallback<> that is triggered on value changes. Use for two-way data binding and user input change detection.

Remarks

Attach this event to data-binding scenarios to react to changes and update parent or connected components.

ValueExpression

Gets or sets an expression that identifies the bound value in the DropDownListEvents<TValue, TItem> component.

Declaration

public Expression<Func<TValue>> ValueExpression { get; set; }

Property Value

Type	Description
System.Linq.Expressions.Expression<System.Func<TValue>>	An `Expression<Func<TValue>>` used with forms and validation to bind the value for validation scenarios. The default value is `null`.

Remarks

This property is commonly used internally for two-way binding and validation with forms, such as with EditForm in Blazor.

ValueTemplate

Gets or sets the customized template content assigned to the selected list item displayed in the input element of the dropdown component.

Declaration

public RenderFragment<TItem> ValueTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<TItem>	A Microsoft.AspNetCore.Components.RenderFragment<> supplying the template for visualizing the selected option. The default value is `null`.

Remarks

Use this property to inject custom UI, such as badges, icons, or conditional formatting, for the currently selected value as shown in the dropdown input.

Examples

<SfDropDownList TItem="string" TValue="string" DataSource="@MyList">
    <DropDownListTemplates TItem="string">
        <ValueTemplate>
            <span> T-shirt size - @(context)</span>
        </ValueTemplate>
    </DropDownListTemplates>
</SfDropDownList>
@code{
    protected List<string> MyList = new List<string>() { "Small", "Medium", "Large" };
}

Width

Gets or sets the visual width of the SfDropDownList<TValue, TItem> component in the UI.

Declaration

public string Width { get; set; }

Property Value

Type	Description
System.String	A string value representing the component width in CSS units such as pixels (`px`) or percentage (`%`). The default value is `100%`.

Remarks

Changing the width property allows the dropdown to fit layouts or UI needs, e.g., in grid systems or popups.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

CallStateHasChangedAsync()

Invokes a component state change and requests a re-render.

Declaration

public Task CallStateHasChangedAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

Can be used by consumers or inheritance to trigger a UI refresh outside of the normal framework pipeline.

Examples

await dropdown.CallStateHasChangedAsync();

ClearAllAsync(EventArgs, Boolean)

Task which used to clear all the items.

Declaration

protected virtual Task ClearAllAsync(EventArgs arguments = null, bool IsProgrammaticallyCleared = false)

Parameters

Type	Name	Description
System.EventArgs	arguments	Specifies the EventArgs arguments.
System.Boolean	IsProgrammaticallyCleared	Indicates whether the value is cleared manually or not, Default is false.

Returns

Type	Description
System.Threading.Tasks.Task	Task.

ClearAsync()

Clears the selected value from the SfDropDownList<TValue, TItem> component and sets both the Value and Index properties to null.

Declaration

public Task ClearAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task that represents the asynchronous operation.

Remarks

Use this method to programmatically reset the selected value and index of the DropDownList to their default (null) state.

Examples

This example shows how to clear the drop-down selection:

await dropDownList.ClearAsync();

DisableItem(TValue)

Disables a specific item in the popup based on its value (TValue).

Declaration

public Task DisableItem(TValue item)

Parameters

Type	Name	Description
TValue	item	The value of the item to disable in the dropdown.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

Use this method to programmatically disable a single item within the drop-down popup. The item is located by its value/type.

Examples

await dropDownList.DisableItem(selectedValue);

DisableItem(Int32)

Disables a specific item in the popup based on its index position (zero-based).

Declaration

public Task DisableItem(int item)

Parameters

Type	Name	Description
System.Int32	item	The zero-based index of the item to disable in the popup list.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

Use this overload to disable an item by its index in the drop-down list. Index must be within the bounds of the item list.

Examples

await dropDownList.DisableItem(3);

DropDownClickHandlerAsync()

Triggers while clicking the dropdown icon.

Declaration

protected Task DropDownClickHandlerAsync()

Returns

Type	Description
System.Threading.Tasks.Task	Task.

FilterAsync(IEnumerable<TItem>, Query, FieldSettingsModel)

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

Declaration

public Task FilterAsync(IEnumerable<TItem> dataSource, Query query = null, FieldSettingsModel fields = null)

Parameters

Type	Name	Description
System.Collections.Generic.IEnumerable<TItem>	dataSource	Specifies the data source.
Query	query	Specifies the query.
FieldSettingsModel	fields	Specifies the fields.

Returns

Type	Description
System.Threading.Tasks.Task	Task.

FilterInputKeyUpHandlerAync(KeyboardEventArgs)

Specifies the keyup event of filter event.

Declaration

protected Task FilterInputKeyUpHandlerAync(KeyboardEventArgs arguments)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Web.KeyboardEventArgs	arguments	Specifies the KeyboardEventArgs arguments.

Returns

Type	Description
System.Threading.Tasks.Task	Task.

FocusAsync()

Sets the input focus to the SfDropDownList<TValue, TItem> component to allow user interaction through keyboard or accessibility tools.

Declaration

public Task FocusAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

Use this method to programmatically set focus on the DropDownList when needed, such as after a page load or a specific user action.

Examples

This example focuses the drop-down list:

await dropDownList.FocusAsync();

FocusOutAsync()

Removes the focus from the SfDropDownList<TValue, TItem> component if it is currently focused.

Declaration

public Task FocusOutAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method can be used to programmatically blur the DropDownList, for example, to shift keyboard focus elsewhere or finalize user input.

Examples

This example removes focus from the drop-down list:

await dropDownList.FocusOutAsync();

FocusOutHandlerAsync(FocusEventArgs, Boolean)

Triggers when the component get focused out.

Declaration

protected Task FocusOutHandlerAsync(FocusEventArgs arguments, bool isFilterinput = false)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Web.FocusEventArgs	arguments	Specifies the FocusEventArgs arguments.
System.Boolean	isFilterinput	Specifies whether it is a filter input or not.

Returns

Type	Description
System.Threading.Tasks.Task	Task.

GetDataByValue(TValue)

Retrieves the record from the data source whose value matches the given ddlValue.

Declaration

public TItem GetDataByValue(TValue ddlValue)

Parameters

Type	Name	Description
TValue	ddlValue	The value to match in the data source. Usually corresponds to the Value property type.

Returns

Type	Description
TItem	The item from the data source that matches the specified value, or the default value if not found.

Remarks

This method is typically used to fetch the data item associated with a selected value. For primitive, enum, or custom types, the match is determined based on the Value property mapping.

Examples

var item = dropDownList.GetDataByValue(selectedValue);

GetItemsAsync()

Retrieves all the items that are currently bound to the SfDropDownList<TValue, TItem> component's data source.

Declaration

public Task<IEnumerable<TItem>> GetItemsAsync()

Returns

Type	Description
System.Threading.Tasks.Task<System.Collections.Generic.IEnumerable<TItem>>	A System.Threading.Tasks.Task<> that contains a collection of items currently bound in the DropDownList.

Remarks

Use this method to programmatically access all items in the DropDownList at runtime, including after custom filtering or virtualization.

Examples

IEnumerable<MyItemType> items = await dropDownList.GetItemsAsync();

HidePopupAsync()

Hides the popup list for the SfDropDownList<TValue, TItem> component.

Declaration

public Task HidePopupAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

Use this method to programmatically close the drop-down list's popup. It will only close the popup if it is currently open.

Examples

await dropDownList.HidePopupAsync();

HideSpinnerAsync()

Hides the data loading spinner, indicating that the DropDownList has finished loading or rendering its items.

Declaration

public Task HideSpinnerAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

Use this method to programmatically remove the loading spinner visual indicator from the DropDownList UI when data is ready or the operation is complete.

Examples

await dropDownList.HideSpinnerAsync();

IsCustomValue()

Declaration

protected override bool IsCustomValue()

Returns

Type
System.Boolean

Overrides

Syncfusion.Blazor.DropDowns.SfDropDownBase<TItem>.IsCustomValue()

RefreshDataAsync()

Refreshes the popup list items of the SfDropDownList<TValue, TItem> component. This is useful when the popup list data changes externally.

Declaration

public Task RefreshDataAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

Call this method whenever the DropDownList data source or filter is modified programmatically so that the popup can reflect the updated list.

Examples

await dropDownList.RefreshDataAsync();

SearchListAsync(KeyboardEventArgs, Boolean)

Task which specifies the search list.

Declaration

protected virtual Task SearchListAsync(KeyboardEventArgs arguments = null, bool isTabAction = false)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Web.KeyboardEventArgs	arguments	Specifies the KeyboardEventArgs arguments.
System.Boolean	isTabAction	A boolean indicating whether the action was triggered by the Tab key.

Returns

Type	Description
System.Threading.Tasks.Task	Task.

SetCurrentViewDataAsync(Int32, Int32)

Declaration

protected override Task SetCurrentViewDataAsync(int virtualItemStartIndex, int virtualItemEndIndex)

Parameters

Type	Name	Description
System.Int32	virtualItemStartIndex
System.Int32	virtualItemEndIndex

Returns

Type
System.Threading.Tasks.Task

Overrides

Syncfusion.Blazor.DropDowns.SfDropDownBase<TItem>.SetCurrentViewDataAsync(System.Int32, System.Int32)

ShowPopupAsync()

Opens the popup that displays the list of items in the SfDropDownList<TValue, TItem> component.

Declaration

public Task ShowPopupAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

Use this method to programmatically show the drop-down list popup. It is useful in scenarios such as focusing the DropDownList or in response to user actions.

Examples

await dropDownList.ShowPopupAsync();

ShowSpinnerAsync()

Displays the data loading spinner until the DropDownList has loaded and rendered its items in the pop-up.

Declaration

public Task ShowSpinnerAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

Use this method to show a visual loading indicator to users while the DropDownList is fetching or preparing its list items.

Examples

await dropDownList.ShowSpinnerAsync();

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.

UpdateIncrementalInfo(Int32, Int32, Boolean)

Declaration

protected Task UpdateIncrementalInfo(int startIndex, int endIndex, bool isIncremental = true)

Parameters

Type	Name	Description
System.Int32	startIndex
System.Int32	endIndex
System.Boolean	isIncremental

Returns

Type
System.Threading.Tasks.Task

UpdateIncrementalItemIndex(Int32, Int32)

Declaration

protected void UpdateIncrementalItemIndex(int startIndex, int endIndex)

Parameters

Type	Name	Description
System.Int32	startIndex
System.Int32	endIndex

UpdateMainData()

Task which update main data.

Declaration

protected virtual void UpdateMainData()

UpdateValueAsync()

Task which updates the value.

Declaration

protected virtual Task UpdateValueAsync()

Returns

Type	Description
System.Threading.Tasks.Task	Task.

Implements

Syncfusion.Blazor.DropDowns.IVirtualList<T>