Using DialogService not showing the dialog

I can't seem to get the dialogservice working, I'm following your dialog example and have created a razor component (empty) called it Dialog.razor. When I add it to my my parent component page and hover over the call i can see the following message when I hover over Dialog

The type 'Dialog' must be convertible to Microsoft.AspNetCore.Components.CompoinentsBase

Click="@(args => dialogService.Open($"Confirm",
null,
new DialogOptions(){ Width = "700px", Height = "530px", Left = "30%", Top = "20%" }))" />

I can see the Click event calling the following Open method but the Dialog page never shows. I can navigate to that page via URL

void Open(string title, Type type, Dictionary<string, object> parameters, DialogOptions options)
{
Invoke(() => { StateHasChanged(); });
}

1 Like

Hi Mark,

You need to register RadzenDialog in the layout as well:

Best Regards,
Vladimir

3 Likes

Thanks I'll give it a try tomorrow, I missed that part.

I'm playing with the DialogService but it doesn't look like the height parameter is being used.
I call the dialog service with the following.

await DialogService.OpenAsync("Edit Sql User",
new Dictionary<string, object>() { {"Id", $"{args.Id}"} },
new DialogOptions(){ Height = "800px"});

and looking at the code I see the following.

I also found that modifying the height through Radzen will generate the following code which I'm not sure is correct. See hight parameter below.

await DialogService.OpenAsync("Edit Platform", new Dictionary<string, object>() { {"Id", $"{args.Id}"} }, new DialogOptions(){ Height = $"{900}" });

The code generation is definitely not correct - we will fix that immediately!

1 Like

Looks like the html element I posted was stripped out of the post, I checked using chrome dev tools and the height was not present in the style for that dialog.

You can post HTML in the forum like this:

<RadzenGrid @ref="grid0" AllowFiltering="true" AllowPaging="true" AllowSorting="true" Data="@(getOrdersResult)" TItem="Order" RowSelect="@Grid0RowSelect">
  <Columns>
    <RadzenGridColumn TItem="Order" Context="order" Property="Id" Title="Id" Type="integer">
    </RadzenGridColumn>
    <RadzenGridColumn TItem="Order" Context="order" Property="UserName" Title="User Name" Type="string">
    </RadzenGridColumn>
    <RadzenGridColumn TItem="Order" Context="order" Format="date-time" FormatString="{0:d}" Property="OrderDate" Title="Order Date" Type="string">
    </RadzenGridColumn>
    <RadzenGridColumn TItem="Order" Context="order" Bubble="false" Filterable="false" Sortable="false" Width="70px">
      <Template Context="order">
        <RadzenButton @ref="gridDeleteButton" ButtonStyle="danger" Icon="close" Size="sm" Click="@((args) =>GridDeleteButtonClick(args, order))">
        </RadzenButton>
      </Template>
    </RadzenGridColumn>
  </Columns>
</RadzenGrid>

Wanted to note for @enchev / whoever handles the demo pages that the Dialog Source tab does not show the <RadzenDialog /> tag - I missed the need to add it until I came here.

Well, this info is included in our getting started and in various places in our documentation:
https://blazor.radzen.com/get-started
https://blazor.radzen.com/docs/guides/getting-started/dialog.html?tabs=server-side