Schedule component no AppointmentRender in popup

Radzen.Blazor Components
1

I have a question about the Schedule Component:

  • When you are in the Month view and there are more items in a slot that the maximum a f.i. '+3 more' link is shown. A click on that show all the items in the slot. We have an AppointmentRender added to the Schedule component which should set the color for the Appointment (Reservation in our case). The render routine is not called for the items in the pop-up. Do I need to do something more or is it an omission?
2

Indeed the AppointmentRender is not invoked in this case. It is currently used for views only.

3

Wow, that was a quick response.

That is sad. We set colors and patterns for the different kinds of reservations. So now in the popup they are not recognizable.

4

I stand corrected - the AppointmentRender does execute for events in the popup. Here is the source: https://github.com/radzenhq/radzen-blazor/blob/master/Radzen.Blazor/Rendering/MonthView.razor#L128

Then I tested it in our online demo and it worked as expected - the Birthday is red which is set in AppointmentRender:

image
image1760×1306 194 KB

I suggest you debug your AppointmentRender.

5

Then there must be some kind of other problem. I've added the following code for rendering and CSS.

 <RadzenPanel class="col-xl-8">
        <RadzenScheduler data-grouptoolscheduler id="grouptoolscheduler"
                         @ref=@scheduler
                         TItem="ReservationDto"
                         Data=@Reservations
                         StartProperty="BeginDateTime"
                         EndProperty="EndDateTime"
                         TextProperty="TimeCaption"
                         SelectedIndex="2"
                         AppointmentSelect=@OnAppointmentSelect
                         AppointmentRender=@OnAppointmentRender>
            <Template Context="reservation">
                @*<div title="@reservation.ActivityName">@reservation.TimeCaption</div>*@
                <RadzenLabel Text=@(reservation.TimeCaption)
                             MouseEnter=@(args => ShowReservationInformationToolTip(args, reservation))
                             MouseLeave=@(args => CloseToolTip(args)) />
            </Template>
            <ChildContent>
                <RadzenDayView />
                <RadzenWeekView />
                <RadzenMonthView />
            </ChildContent>
        </RadzenScheduler>
    </RadzenPanel>

In code behind:

/// <summary>
/// A reservation in the schedule is rendered. Determine its data-xxx attribute using the ActivityName
/// The data-xxx attributes are used in the isolated CSS.
/// </summary>
private void OnAppointmentRender(SchedulerAppointmentRenderEventArgs<ReservationDto> args)
	{
    var activity = "data-" + args.Data.ActivityName.ToLower().Replace(' ', '-').Replace('_', '-');

    args.Attributes[activity] = string.Empty;
	}

In CSS:

::deep [data-prep-time] {
    background-color: @wur-blue;
    color: @wur-white;
}

::deep [data-resit-exam] {
    background-color: @wur-gray;
    color: @wur-white;
}

::deep [data-extra-time-exam] {
    background-color: @wur-orange;
    color: @wur-black;
}

Results in:

image
image1298×812 49 KB

6

It's probably the CSS. Check the rendered output with your browser's developer tools. Also keep in mind that dialogs render in the <body>

7

You're right about the render firing. It does hit the breakpoint in the routine. Should have payed better attention.

8

I think I see the problem. It looks like it is because the popup is tied into the HTML at a level where the generated Blazor ID which is in the generated CSS is different.

Where we specify ::deep, Blazor generates this in the CSS:

[b-gpdg1j5zos] [data-prep-time] {
  background-color: #3A84C1;
  color: #f6f7f9;
}
[b-gpdg1j5zos] [data-resit-exam] {
  background-color: gray;
  color: #f6f7f9;
}
[b-gpdg1j5zos] [data-extra-time-exam] {
  background-color: #FF9933;
  color: black;
}

The point where the popup is injected in the HTML does not have a parent with this b-pgdg1j5zos ID but has a different ID. So the CSS isolation is the problem. Don't think I can solve this with ::deep.

9

It's not exactly how I like it but it works. Specified them in the main.css.

image
image1298×812 40.7 KB

10

Indeed it seems CSS isolation doesn't play well at all with custom component libraries. Not sure if Microsoft even intended it to work that way.