How to show popup after toggle switch CheckBox using Blazor and DevExpress-CodePudding

I need show a confirm popup when changing the state's DxCheckBox. The original build is the below:

<DxCheckBox @bind-Checked="@value" CheckType="CheckType.Switch" Enabled="false" />

When the switch be false and the user click in switch should show the confirm popup "Do you want make the product active?", and when the switch br true and the user click in switch should the confirm popup "Do you want make the product inactive?"

I tryed add onclick event but don't function. Other solution that I tryed was the below:

<DxCheckBox CheckType="CheckType.Switch" Enabled="false" CheckedChanged="@((bool value) => ShowChangeAvailabilityConfirm(value))" />

But also don't function.

The attempts was following the documentation in this link https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1.CheckedChanged and this link also https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1._properties

Someone already passed per somethink similar and have some suggestion?

I tryed apply a suggestion below using the code:


    <DisplayTemplate>
           @{
                var item = context as PriceListValueDTO;
                var value = item.IsUnavailableForSale;
                <DxCheckBox Checked="@value" CheckType="CheckType.Switch" Enabled="true" T="bool" CheckedChanged="ShowChangeAvailabilityConfirm" />
                 }
       </DisplayTemplate>

And in file razor.cs I tryed


    private async Task ShowChangeAvailabilityConfirm(bool value)
            {
                if (value)
                {
                    await this.ConfirmPopupRef.Open(ConfirmOptionEnum.ToUnavailable)
                            .ContinueWith((o) => value = false);
                }
    
                await this.ConfirmPopupRef.Open(ConfirmOptionEnum.ToAvailable)
                            .ContinueWith((o) => value = true);
            }

And it worked!

CodePudding user response：

You also need to set the Checked parameter and update it manually when CheckedChanged event occurs:

<DxCheckBox CheckType="CheckType.Switch"
            Checked="@_isChecked"
            CheckedChanged="ShowChangeAvailabilityConfirm" />

@code {
    private bool _isChecked;

    private void ShowChangeAvailabilityConfirm(bool value)
    {
        // show confirm dialog and set _isChecked if result is confirmed

        if (dialogResult.IsConfirmed)
        {
            _isChecked = value;
        }
    }
}

You can simplify

CheckedChanged="@((bool value) => ShowChangeAvailabilityConfirm(value))"

CheckedChanged="ShowChangeAvailabilityConfirm"