blazorbootstrap icon indicating copy to clipboard operation
blazorbootstrap copied to clipboard

Is there a way to disable Dropdown

Open girishus opened this issue 1 year ago • 7 comments

Discussed in https://github.com/vikramlearning/blazorbootstrap/discussions/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 avatar Feb 19 '24 15:02 girishus

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

girishus avatar Feb 19 '24 15:02 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

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

gvreddy04 avatar Feb 19 '24 17:02 gvreddy04

@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>

MarvinKlein1508 avatar Mar 11 '24 10:03 MarvinKlein1508

I used the Disabled property on the <Dropdown> 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>

tjdennis avatar Mar 13 '24 16:03 tjdennis

@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>

image

gvreddy04 avatar Mar 13 '24 17:03 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,

tjdennis avatar Mar 13 '24 17:03 tjdennis

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?

martinmueller4voice avatar May 07 '24 10:05 martinmueller4voice