Hey Everyone,
Im currently working on a Web-App for scheduling projects and displaying their duration in a Calendar using the Radzen Scheduler Component. Its a Blazor Server App using ASP.NET 8.0 and the Radzen.Blazor NuGet Package 5.5.2.
My Problem is that no matter what I try my Radzen UI Controls like buttons etc. are not calling the messages I told it to call on certain Events like OnClick or OnSlotSelect. The Components are rendering perfectly fine and exactly the way you would expect them to render, including the animation that is played when e.g. clicking on a button to change the view of the scheduler from Month to Week or to move forwards or backwards one Month.
My Code looks like this:
Home.razor
@page "/"
@using ProjectScheduler.Components.Classes
@inject DialogService DialogService
@inject NotificationService NotificationService
<PageTitle>Home</PageTitle>
<div>
<RadzenButton Click=@(args => OnClick("TestButton")) Text="Primary" ButtonStyle="ButtonStyle.Primary"/>
</div>
<div>
<RadzenScheduler @ref=@scheduler SlotRender=@OnSlotRender style="height: 768px;" TItem="Appointment" Data=@appointments StartProperty="Start" EndProperty="End"
TextProperty="Text" SelectedIndex="2"
SlotSelect=@OnSlotSelect AppointmentSelect=@OnAppointmentSelect AppointmentRender=@OnAppointmentRender
AppointmentMove=@OnAppointmentMove >
<RadzenDayView />
<RadzenWeekView />
<RadzenMonthView />
</RadzenScheduler>
</div>
@code {
RadzenScheduler<Appointment> scheduler;
Dictionary<DateTime, string> events = new Dictionary<DateTime, string>();
IList<Appointment> appointments = new List<Appointment>
{
new Appointment { Start = DateTime.Today, End = DateTime.Today.AddDays(4), Text = "[p1] Project 1" },
new Appointment { Start = DateTime.Today.AddDays(4), End = DateTime.Today.AddDays(10), Text = "[p1] Project 2" },
new Appointment { Start = DateTime.Today.AddDays(10), End = DateTime.Today.AddDays(24), Text = "[p1] Project 3" },
new Appointment { Start = DateTime.Today, End = DateTime.Today.AddDays(12), Text = "[p2] Project 1" },
new Appointment { Start = DateTime.Today.AddDays(12), End = DateTime.Today.AddDays(15), Text = "[p2] Project 2" },
new Appointment { Start = DateTime.Today.AddDays(15), End = DateTime.Today.AddDays(23), Text = "[p2] Project 3" },
new Appointment { Start = DateTime.Today, End = DateTime.Today.AddDays(25), Text = "[p3] Project 1" },
};
private void OnClick(string text)
{
NotificationService.Notify(new NotificationMessage { Severity = NotificationSeverity.Info, Summary = "Button Clicked", Detail = text });
}
void OnSlotRender(SchedulerSlotRenderEventArgs args)
{
if (args.View.Text == "Month" && args.Start.Date == DateTime.Today)
{
args.Attributes["style"] = "background: var(--rz-scheduler-highlight-background-color, rgba(255,220,40,.2));";
}
if ((args.View.Text == "Week" || args.View.Text == "Day") && args.Start.Hour > 8 && args.Start.Hour < 19)
{
args.Attributes["style"] = "background: var(--rz-scheduler-highlight-background-color, rgba(255,220,40,.2));";
}
}
async Task OnSlotSelect(SchedulerSlotSelectEventArgs args)
{
if (args.View.Text != "Year")
{
Appointment data = await DialogService.OpenAsync<AddAppointmentPage>("Add Appointment",
new Dictionary<string, object> { { "Start", args.Start }, { "End", args.End } });
if (data != null)
{
appointments.Add(data);
await scheduler.Reload();
}
}
}
async Task OnAppointmentSelect(SchedulerAppointmentSelectEventArgs<Appointment> args)
{
var copy = new Appointment
{
Start = args.Data.Start,
End = args.Data.End,
Text = args.Data.Text
};
var data = await DialogService.OpenAsync<EditAppointmentPage>("Edit Appointment", new Dictionary<string, object> { { "Appointment", copy } });
if (data != null)
{
args.Data.Start = data.Start;
args.Data.End = data.End;
args.Data.Text = data.Text;
}
await scheduler.Reload();
}
void OnAppointmentRender(SchedulerAppointmentRenderEventArgs<Appointment> args)
{
if (args.Data.Text.StartsWith("[p1]"))
{
args.Attributes["style"] = "background: red";
}
if (args.Data.Text.StartsWith("[p2]"))
{
args.Attributes["style"] = "background: green";
}
if (args.Data.Text.StartsWith("[p3]"))
{
args.Attributes["style"] = "background: orange";
}
}
async Task OnAppointmentMove(SchedulerAppointmentMoveEventArgs args)
{
var draggedAppointment = appointments.FirstOrDefault(x => x == args.Appointment.Data);
if (draggedAppointment != null)
{
draggedAppointment.Start = draggedAppointment.Start + args.TimeSpan;
draggedAppointment.End = draggedAppointment.End + args.TimeSpan;
await scheduler.Reload();
}
}
}
App.razor:
<!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="ProjectScheduler.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<RadzenTheme Theme="material" @rendermode="InteractiveServer" />
<HeadOutlet />
</head>
<body>
<Routes />
<script src="_framework/blazor.web.js"></script>
<script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
</body>
</html>
Appointment.cs:
namespace ProjectScheduler.Components.Classes
{
public class Appointment
{
public DateTime Start { get; set; }
public DateTime End { get; set; }
public string Text { get; set; }
}
}
Program.cs:
using ProjectScheduler.Components;
using Radzen;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRadzenComponents();
builder.Services.AddRazorComponents().AddInteractiveServerComponents();
builder.Services.AddScoped<DialogService>();
builder.Services.AddScoped<NotificationService>();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error", createScopeForErrors: true);
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseAntiforgery();
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode();
app.Run();
The above listed code of the razor page Home.razor should e.g. call the method OnClick(String text) when the button with the text "TestButton" is pressed or should call the method OnAppointmentSelect(SchedulerAppointmentSelectEventArgs<Appointment> args) when a Appointment inside the scheduler component is being selected. Yet none of those methods get called. If I use normal HTML buttons to change the text of a label or something like this everything works perfectly fine and the specified methods of the event is being called. So I only have that issue with the Radzen Components.
Is there anything that Im missing in my code or have done in a wrong way? All of the Code for the examples should be nearly exactly the same as listed in the Radzen Docs / Examples which is why Im so confused about this.
Thank you in advance for helping me out 
Nightcore
