Nested dialogs/modals

Radzen Blazor Studio
1

I have a page that opens a dialog on a button click

    protected async Task LoadDetails(int loadId)
    {
        await DialogService.OpenAsync<LoadDetail>("Load Detail",
            new Dictionary<string, object> { { "Id", loadId } });
    }

Load Detail opens a dialog of it's own

    protected async Task OpenScannerModal(Vehicle vehicle)
    {
        var result = await DialogService.OpenAsync<ScannerAnylineBarcode>("Scanner");

        if (result != null)
        {
            var scannedVin = result.ToString();
            bool isDefaultVin = vehicle.VIN.All(c => c == '?');

            if (isDefaultVin)
            {
                vehicle.VIN = scannedVin;
                vehicle = await LoadVehicleMethods.VinDecode(vehicle);
                await loadVehicleMethods.Rate(vehicle, SqlDatabaseService, Security);
                await loadVehicleMethods.MilesAndWeightLookups(vehicle, SqlDatabaseService);
                vehicle.Verified = true;
                await SqlDatabaseService.UpdateVehicle(vehicle.Id, vehicle);
            }
            else if (vehicle.VIN == scannedVin)
            {
                vehicle.Verified = true;
                await SqlDatabaseService.UpdateVehicle(vehicle.Id, vehicle);
            }

            await GetLoadVehicles();
            StateHasChanged();
        }
    }

ScannerAnylineBarcode is a scanner, once the scanner finds something, it closes and sends the value back to LoadDetail

    [JSInvokable]
    public async Task OnScanCompleted(string vinResult)
    {
        await InvokeAsync(() => DialogService.Close(vinResult));
    }

this does not work as expected and hence this post.

what I need is for LoadDetail page to stay open and ScannerAnylineBarcode to close. it does not work, it's hard to understand what actual happens, ScannerAnylineBarcode closes, but so does LoadDetail or it hides behind the main page or something, the "dialog/modal stack" doesn't behave like you'd think it should/like I need it to.

any ideas?

Thank you

2

We can’t provide any advice unless we have a runnable example where we can reproduce the problem. Use our editable demos to provide such.

3

should it work in theory? does the platform support nested dialogs?

4

how would you expect me to set it up with your 'editable demos'?

5

I created a test app which opens nested dialogs and seems to work as expected - the child dialog gets closed and the parent remains open. Feel free to modify it so we can reproduce your issue.
NestedDialog.zip (212.7 KB)

6

thank you, I'll update you're code with my scenario.

it gets tricky because it is a bar code scanner and I want to close the scanner dialog when the scanner finds something.

I added a close button to the dialog with the scanner for testing.

it works fine with the button, it's only an issue when the scanner tries to close it

Dose NOT work:
[JSInvokable]
public async Task OnScanCompleted(string vinResult)
{
await InvokeAsync(() => DialogService.Close(vinResult));
}

Works fine:

    public async Task Close(string vinResult)
    {
        await InvokeAsync(() => DialogService.Close(vinResult));
    }

here is my js function that triggers OnScanCompleted

    window.anylineSDK.onResult = function (result) {
        let vinText = result?.result?.barcodeResult?.barcodes?.[0]?.value || "[VIN not found]";
        if (vinText.length === 18) {
            vinText = vinText.substring(1);
        }
        dotNetHelper.invokeMethodAsync("OnScanCompleted", vinText);
    };    } catch (error) {
7

stand by, it might be ok, doing some more extensive testing today...

8

I have a similar issue, from the NestedDialog.zip sample that korchev posted, if I update the Index.razor.cs file and replace the Button0Click withi this function:

protected async System.Threading.Tasks.Task Button0Click(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
{
await DialogService.OpenSideAsync(
title: "Parent Dialog",
options: new SideDialogOptions
{
Position = DialogPosition.Bottom,
Height = "90%",
CloseDialogOnOverlayClick = true,
}
);
}

The child dialog opens below the parent dialog, If I close the parent dialog with the top right corner X button, and then see the child dialog.