Problems with Scheduler Opening Dialog

Radzen.Blazor Components
1

I am working on the Scheduler demo for blazor. I got it running and can change the month, day, year, but when I click on an event to edit the EditAppointmentPage never loads. Here is the code:

var data = await DialogService.OpenAsync<EditAppointmentPage>("Edit Appointment", new Dictionary<string, object> { { "Appointment", copy } });

This line is called, but nothing returns. I set a breakpoint on the EditAppointmentPage initializeasync method and it is never called. No errors are thrown and the console isn't reporting anything. When I do just a DialogService.Open nothing returns and it moves to the next line. What am I doing wrong?

2

Hi @katghoti,

Make sure you have setup the dialog service correctly:

  1. Ensure you have builder.Services.AddRadzenComponents(); in your Program.cs
  2. You also need <RadzenDialog /> or <RadzenComponents/> in your MainLayout.razor
3

I have done this already. Here is my program.cs file:

Snippet

builder.Services.AddScoped();
builder.Services.AddScoped();
builder.Services.AddScoped();
builder.Services.AddScoped();
builder.Services.AddScoped();

builder.Services.AddRadzenComponents();

Here is my Mainlayout.razor page:

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>
<RadzenComponents />
<RadzenContextMenu />
<RadzenDialog />
<RadzenNotification />
<RadzenTooltip />
4

These are not needed since you have <RadzenComponents />.

5

If you are using a SSR layout in .NET 8 you have to follow the instructions in order for dialogs to work:

https://blazor.radzen.com/get-started

6

Okay I am at a loss now. I have followed the instructions on running SSR and the dialog still does not pop up the form for editing/adding an appointment on the scheduler. I have even disabled popups on this site just in case. I looked in the console and there are no errors. Any other suggestions?

I just tried using the tooltip demo as well and no tooltip is working. Here is my setup:

App.razor Page:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="TestAPP.Discard.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
</body>

</html>

_imports page

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using TestAPP.Discard
@using TestAPP.Discard.Client
@using TestAPP.Discard.Components
@using TestAPP.Discard.Data
@using Radzen.Blazor
@using Radzen

Program cs page:

using Radzen;
using TestAPP.Discard.Client.Pages;
using TestAPP.Discard.Components;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents()
.AddInteractiveWebAssemblyComponents();

builder.Services.AddRadzenComponents();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseWebAssemblyDebugging();
}
else
{
app.UseExceptionHandler("/Error", createScopeForErrors: true);
// The default HSTS value is 30 days. You may want to change this for production scenarios, see Enforce HTTPS in ASP.NET Core | Microsoft Learn.
app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();
app.UseAntiforgery();

app.MapRazorComponents()
.AddInteractiveServerRenderMode()
.AddInteractiveWebAssemblyRenderMode()
.AddAdditionalAssemblies(typeof(Counter).Assembly);

app.Run();

Schedule.razor page

@page "/schedule"
@inject TooltipService TooltipService
@rendermode InteractiveServer


<RadzenScheduler style="height: 768px;" TItem="Appointment" Data=@appointments StartProperty="Start" EndProperty="End"
                 TextProperty="Text" SelectedIndex="2" AppointmentMouseEnter=@OnAppointmentMouseEnter AppointmentMouseLeave=@OnAppointmentMouseLeave>
    <RadzenDayView />
    <RadzenWeekView />
    <RadzenMonthView />
    <RadzenYearView />
</RadzenScheduler>

@code {
    IList<Appointment> appointments = new List<Appointment>
                {
        new Appointment { Start = DateTime.Today.AddDays(-2), End = DateTime.Today.AddDays(-2), Text = "Birthday" },
        new Appointment { Start = DateTime.Today.AddDays(-11), End = DateTime.Today.AddDays(-10), Text = "Day off" },
        new Appointment { Start = DateTime.Today.AddDays(-10), End = DateTime.Today.AddDays(-8), Text = "Work from home" },
        new Appointment { Start = DateTime.Today.AddHours(10), End = DateTime.Today.AddHours(12), Text = "Online meeting" },
        new Appointment { Start = DateTime.Today.AddHours(10), End = DateTime.Today.AddHours(13), Text = "Skype call" },
        new Appointment { Start = DateTime.Today.AddHours(14), End = DateTime.Today.AddHours(14).AddMinutes(30), Text = "Dentist appointment" },
        new Appointment { Start = DateTime.Today.AddDays(1), End = DateTime.Today.AddDays(12), Text = "Vacation" },
                };

    void OnAppointmentMouseEnter(SchedulerAppointmentMouseEventArgs<Appointment> args)
    {
        TooltipService.Open(args.Element, ts =>
    @<RadzenStack Orientation="Orientation.Vertical" Gap="0" Class="rz-p-6" Style="min-width: 250px; max-width: 500px;">
        <RadzenText TextStyle="TextStyle.H4" Class="rz-mb-4" Style="color: var(--rz-tooltip-color);">
            @args.Data.Text
        </RadzenText>
        <RadzenStack Orientation="Orientation.Horizontal" Gap="4px">
            <RadzenText TextStyle="TextStyle.Body2" Style="color: var(--rz-tooltip-color); width: 44px;">
                <strong>Start</strong>
            </RadzenText>
            <RadzenText TextStyle="TextStyle.Body2" Style="color: var(--rz-tooltip-color);">
                @args.Data.Start.ToString("hh:mm ⋅ dddd, MMMM d")
            </RadzenText>
        </RadzenStack>
        <RadzenStack Orientation="Orientation.Horizontal" Gap="4px">
            <RadzenText TextStyle="TextStyle.Body2" Style="color: var(--rz-tooltip-color); width: 44px;">
                <strong>End</strong>
            </RadzenText>
            <RadzenText TextStyle="TextStyle.Body2" Style="color: var(--rz-tooltip-color);">
                @args.Data.End.ToString("hh:mm ⋅ dddd, MMMM d")
            </RadzenText>
        </RadzenStack>
    </RadzenStack>, new TooltipOptions { Position = TooltipPosition.Right, Duration = null });
    }

    void OnAppointmentMouseLeave(SchedulerAppointmentMouseEventArgs<Appointment> args)
    {
        TooltipService.Close();
    }
}

I don't know what I am missing here. Neither the tool tip or the dialog are working.

7

Check the getting started instructions again. You need to update your layout as well.

8

Sorry I missed it. Here is my Mainlayout.razor page

`@inherits LayoutComponentBase

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

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

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

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>
<RadzenComponents />`
9

Please check the getting started document and the section about .NET 8. You are missing the @rendermode attribute.

10

SSR
@rendermode InteractiveServer