vikramlearning / blazorbootstrap

An Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS frameworks.
https://docs.blazorbootstrap.com/
Apache License 2.0
670 stars 32 forks source link

Is there a way to disable Dropdown #575

Open girishus opened 6 months ago

girishus commented 6 months ago

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 commented 6 months ago

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

Dropdown button @foreach (var dept in DepartmentDatas) { @dept.DisplayText }
<FooterTemplate>
    <Button Color="ButtonColor.Secondary" @onclick="OnHideModalClick">Close</Button>
    <Button Color="ButtonColor.Primary"  >Save changes</Button>
</FooterTemplate>

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

gvreddy04 commented 6 months ago

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 commented 6 months ago

@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 commented 6 months ago

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 commented 6 months ago

@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

tjdennis commented 6 months ago

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 commented 4 months ago

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?