Example for DialogService.OpenSideAsync

Radzen.Blazor Components
1

Hi,

I'm struggling to make side dialog working. I followed the component example and use the following code:

await DialogService.OpenSideAsync("Side Panel",
options: new SideDialogOptions { CloseDialogOnOverlayClick = true,
Position = DialogPosition.Bottom });

But can't figure out what is "DialogSideContent".

Thanks.

2

Maybe you should open the entire solution to know better what where is defined:

3

This is a blazor component defined in DialogSideContent.razor.

4

Thanks Korchev. Do you have an example how to open a sidedialog inline?

i.e. I can open a regular dialog using:

private async void ShowRuleInfo()
{
await dialogService.OpenAsync("Title", ds =>
@

    </div>, new DialogOptions() { CloseDialogOnOverlayClick = true });
    
}

but could not figure out how to do it for dialogService.OpenSideAsync

1 Like
6

Hello,

I am having issues with this component as well. When I copy and use your example from Blazor Dialog component for the Side Dialog, the top and bottom work, but when I am trying to use the right and left, it doesn't. It is being drawn off screen because I see it in the elements when I inspect the page.

I was trying to see if I messed with the css in dev tool if I could get it to move to the screen, but no dice.

@enchev @korchev @avishaul

7

Hi @aminaTowne,

This means that there is some CSS specific to your app which interferes with the positioning of the side dialog. Try moving the <RadzenDialog /> component outside of any other HTML elements that you have. Also inspect the dialog with your browser's developer tools to see what CSS rules apply to it. If there is a rule that doesn't come from a .rz-* class it is probably affecting the positioning logic.

8

@korchev The is at the end of the MainLayout.razor file as suggested in the documentation:

MainLayout.razor

@inherits LayoutComponentBase

<PageTitle>Testing-Blazor-Radzen</PageTitle>

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>
<RadzenDialog />

Popup.razor

@page "/popup"

@inject DialogService DialogService

<div class="rz-p-12 rz-text-align-center">
    <RadzenStack Orientation="Orientation.Horizontal" Gap="1rem" AlignItems="AlignItems.Center" Class="rz-p-4 rz-mb-6 rz-border-radius-1" Style="border: var(--rz-grid-cell-border);" Wrap="FlexWrap.Wrap">
        <RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" AlignItems="AlignItems.Center">
            <RadzenLabel Text="Position:" />
            <RadzenSelectBar @bind-Value="@position" TextProperty="Text" ValueProperty="Value"
                            Data="@(Enum.GetValues(typeof(DialogPosition)).Cast<DialogPosition>().Select(t => new { Text = $"{t}", Value = t }))" Size="ButtonSize.Small" />
        </RadzenStack>
        <RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" AlignItems="AlignItems.Center">
            <RadzenLabel Text="Show mask:" />
            <RadzenSwitch @bind-Value="@showMask" />
        </RadzenStack>
        <RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" AlignItems="AlignItems.Center">
            <RadzenLabel Text="Close on overlay click:" />
            <RadzenSwitch @bind-Value="@closeDialogOnOverlayClick" Disabled=@(!showMask) />
        </RadzenStack>
    </RadzenStack>
    <RadzenButton Text="Dialog on Side" ButtonStyle="ButtonStyle.Secondary" Click="@OpenSideDialog" />
</div>

@code {
    DialogPosition position;
    bool closeDialogOnOverlayClick;
    bool showMask;

    async Task OpenSideDialog()
    {
        Console.WriteLine(position);
        Console.WriteLine(closeDialogOnOverlayClick);
        await DialogService.OpenSideAsync<Counter>("Side Panel Content", options: new SideDialogOptions { CloseDialogOnOverlayClick = closeDialogOnOverlayClick, Position = position, ShowMask = showMask });
    }
}

And when looking at the created elements in dev tools it is under the body tag with no classes associated to it: [summarized snippet]

From Dev Tools:

<html>
    ...
    <body>
        <div class="page">...</div>
        <aside class="rz-dialog-side rz-dialog-side-position-right " tabindex="0" style="" aria-labelledby="rz-dialog-side-label">...</aside>
    </body>
</html>
9

Unfortunately I don't know what to suggest. I guess you can compare the CSS applied in our online demo and in your application side by side. Perhaps it would shed some light.

10

@korchev this is why you are paid the big bucks! Thank you. It has to do with the placement of the <RadzenDialog /> in the MainLayout.cs file. In the documentation it says to place it at the end, but when inspecting the demo it was above the page content:

Demo Inspection:

<html>
    <head>...</head>
    <body>
        <aside class="rz-dialog-side rz-dialog-side-position-right " tabindex="0" style="" aria-labelledby="rz-dialog-side-label">...</aside>
        ...
        <div class="rz-layout" id="-dfr9ZZkoE" _bl_2="">...</div>
    </body>
</html>

So I moved it in my MainLayout.cs:

@inherits LayoutComponentBase

<PageTitle>Testing-Blazor-Radzen</PageTitle>

<RadzenDialog />
<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

I am not a front end UI developer, so not sure if this is working as expected, @korchev @enchev maybe you can answer that question?

Not sure if @avishaul ever resolved their issue, but all positions toggled are working for me now.

11

Isn't possible, is it?