Is there a way to disable Dropdown

[girishus]

Discussed in #371

^{Originally posted by powertec-dan September 20, 2023}
There appears to be a way to disable all the DropDownItems, but I'd like to show the dropdown itself as unavailable.

I tried to add Disabled="@value" to the DropdownToggleButton but the dropdown stops functioning after any other event is thrown on the page.

Any help or advice would be appreciated.

Cheers,
Dan

[girishus]

How I get selected value (DropdownItem) from Modal class - Dropdown in side dropdown menu
e.g.
<Modal @ref="modal" Title="Modal title">


Dropdown button
<DropdownMenu @OnHidden="OnDropdownHiddenAsync">
@foreach (var dept in DepartmentDatas)
{
@dept.DisplayText
}




<Button Color="ButtonColor.Secondary" @OnClick="OnHideModalClick">Close
Save changes


<Button Color="ButtonColor.Primary" @OnClick="OnShowModalClick">Show Modal

[gvreddy04]

How I get selected value (DropdownItem) from Modal class - Dropdown in side dropdown menu e.g. <Modal @ref="modal" Title="Modal title"> Dropdown button <DropdownMenu @OnHidden="OnDropdownHiddenAsync"> @foreach (var dept in DepartmentDatas) { @dept.DisplayText } <Button Color="ButtonColor.Secondary" @OnClick="OnHideModalClick">Close Save changes <Button Color="ButtonColor.Primary" @OnClick="OnShowModalClick">Show Modal

@girishus Please ask this as a seperate question in the discussion. I think you have to implement a custom logic.

[MarvinKlein1508]

@girishus you can apply Disabled state for each item in the dropdown. This way the drop down opens but you cannot click on the elements which are disabled.

<Dropdown>
    <DropdownToggleButton Color="ButtonColor.Secondary">Dropdown button</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="ButtonType.Link" Disabled="true">Action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
    </DropdownMenu>
</Dropdown>

[tjdennis]

I used the Disabled property on the tag itself. It disables the entire dropdown so you can't click it at all.

Here's an example from my code:

<Dropdown Size="Size.Small" Disabled="@(!EnablePoFields)">
</Dropdown>

[gvreddy04]

@tjdennis Try this.

<Dropdown>
    <DropdownToggleButton Color="ButtonColor.Secondary">Dropstart</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link" Disabled="true">Another action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
    </DropdownMenu>
</Dropdown>

[tjdennis]

Hi @gvreddy04

The original question above asked how to disable the entire DropDown control, not just an individual item in the DropDown list. Putting the Disabled property on the DropDown tag will do that.

His only error was trying to put it on the DropdownToggleButton tag instead of the DropDown tag.

Regards,

[martinmueller4voice]

When using Dropdown with Split="true" and binding Disabled to a variable on the page (Disabled="@actionInProgress"), only the DropdownActionButton gets disabled, but the DropdownToggleButton stays active.
Trying to manually disable the ToggleButton as well with disabled="@actionInProgress" works for disabling, but after re-enabling the ToggleButton, the menu doesn't open anymore.

How can we fix this?

[gvreddy04]

Hi @gvreddy04

The original question above asked how to disable the entire DropDown control, not just an individual item in the DropDown list. Putting the Disabled property on the DropDown tag will do that.

His only error was trying to put it on the DropdownToggleButton tag instead of the DropDown tag.

Regards,

Demo Link: https://demos.blazorbootstrap.com/dropdown#disabled

Sample code

<Dropdown Color="DropdownColor.Secondary" Disabled="@isDropdownDisabled">
    <DropdownToggleButton>Dropstart</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
    </DropdownMenu>
</Dropdown>

<div class="mt-3">
    <Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="EnableDropdown">Enable</Button>
    <Button Color="ButtonColor.Danger" Size="ButtonSize.Small" @onclick="DisableDropdown">Disable</Button>
</div>
@code
{
    private bool isDropdownDisabled = true;
    private void EnableDropdown() => isDropdownDisabled = false;
    private void DisableDropdown() => isDropdownDisabled = true;
}

Screenshot