Disabled Items in Blazor DropDownList Component

4 Nov 20252 minutes to read

The DropDownList supports disabling individual items for scenario-specific control. Map a boolean field in your data model to the Disabled property of the field settings to render items as non-interactive. Disabled items cannot be selected or focused through keyboard navigation.

In the following sample, items are rendered as disabled based on the value of the Disabled field.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfDropDownList TValue="string" TItem="StatusData" Placeholder="Select Status" DataSource="@LocalData">
    <DropDownListFieldSettings Value="Text" Disabled="State" ></DropDownListFieldSettings>
</SfDropDownList>

@code {

    public IEnumerable<StatusData> LocalData { get; set; } = new StatusData().StatusDataList();

    public class StatusData
    {
        public string Text { get; set; }
        public bool State { get; set; }

        public List<StatusData> StatusDataList()
        {
            List<StatusData> staus = new List<StatusData>();
            staus.Add(new StatusData { Text = "Open", State = false });
            staus.Add(new StatusData { Text = "Waiting for Customer", State = false });
            staus.Add(new StatusData { Text = "On Hold", State = true });
            staus.Add(new StatusData { Text = "Follow-up", State = false });
            staus.Add(new StatusData { Text = "Closed", State = true });
            staus.Add(new StatusData { Text = "Solved", State = false });
            staus.Add(new StatusData { Text = "Feature Request", State = false });
            return staus;

        }
    }
}

Disable Item Method

Use the disable item API to change the disabled state of an item at runtime (for example, in response to user actions or data changes). This method updates the disabled state for a single item; iterate your item set to disable multiple entries. If the currently selected item is disabled dynamically, the selection is cleared automatically. The underlying DataSource should also reflect the updated disabled state to keep UI and data in sync.

Parameter	Type	Description
itemValue	string | number | boolean | object	The value of the item to disable.
itemIndex	number	The zero-based index of the item to disable.

Enabled

If you want to disabled the overall component to set the Enabled property to false.