Can't stop propagation in Scheduler

Radzen.Blazor Components
1

Hello,
I have my Scheduler -
image
The X (clear icon) is for deleting appointments. It worked fine until I wired up the Scheduler's AppointmentSelect event.

<PageTitle>EventCalendar</PageTitle>
<RadzenStack>
    <RadzenRow>
        <RadzenColumn SizeMD=12>
            <RadzenScheduler AppointmentRender="@SchedulerAppointmentRender" Data="@viewEventItems" @onclick:stopPropagation="true" EndProperty="EndTime" @ref=@scheduler SelectedIndex="2" SlotRender="@OnSlotRender" SlotSelect="@OnSlotSelect" StartProperty="StartTime" Style="height: 768px" TextProperty="Subject" TItem="Models.EventsData.ViewEventItemsFull" AppointmentSelect="@OnAppointmentSelect">
                <Template Context="data">
                    <RadzenColumn  style="display: flex; justify-content: space-between; align-items: center; height: 100%; width: 100%">
                        <RadzenRow Style="height: 18px" MouseEnter="@((args) => OnCalTooltip(args, data))">
                            @data.Subject
                        </RadzenRow>
                        <RadzenRow>
                            <RadzenIcon Icon="clear" Click="@(() => CalendarDeleteIconClick(data.Id))"></RadzenIcon>
                        </RadzenRow>
                    </RadzenColumn>
                </Template>
                <ChildContent>
                    <RadzenDayView></RadzenDayView>
                    <RadzenWeekView></RadzenWeekView>
                    <RadzenMonthView></RadzenMonthView>
                </ChildContent>
            </RadzenScheduler>
        </RadzenColumn>
    </RadzenRow>
</RadzenStack>

Now when clicking the clear icon, AppointmentSelect always fires instead of my CalendarDeleteIconClick method. This is an issue with all scheduler views, and I've tried placing @onclick:stopPropagation="true" on the RadzenScheduler element, and its column and rows.

Any suggestions how I might be able to resolve this?

Thank you,
SloSuenos

2

I think @onclick:stopPropagation it should be applied to the element that has the click handler - that's the RadzenIcon:

    <Template Context="data">
        <RadzenStack JustifyContent="JustifyContent.SpaceBetween" Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
            @data.Text 
            <RadzenIcon style="height: 12px" Icon="clear" 
                 @onclick:stopPropagation 
                 @onclick="@(() => console.Log($"Clicked {data.Text}"))" />
        </RadzenStack>
    </Template>

stop-propagation

3

Hello Atanas,

I'd tried putting stopPropogation with the icon and that results in the icon click having no effect. The event is somehow lost or covered or something.

I used the html you provided above with some minor adjustments:

            <Template Context="data">
                <RadzenStack AlignItems="AlignItems.Center" JustifyContent="JustifyContent.SpaceBetween" MouseEnter="@((args) => OnCalTooltip(args, data))" Orientation="Orientation.Horizontal">
                    @data.Subject
                    <RadzenIcon @onclick="@(() => CalendarDeleteIconClick(data.Id))" Icon="clear" @onclick:stopPropagation style="height: 12px"/>
                </RadzenStack>
            </Template>

But that caused this error on build: RZ10010 The component parameter 'onclick' is used two or more times for this component. Parameters must be unique (case-insensitive). The component parameter 'onclick' is generated by the '@onclick' directive attribute.

Changing the event handler to "click=" or "Click=" causes the event to not fire at all.

However, via brute force trying every combination (because my DOM, etc. skills suck) I determined that using "onclick=" for the event and "@onclick:" for stopPropagation is acceptable for some reason, and now it all works.

Thanks for your help,
SloSuenos

4

@korchev on a somewhat separate note, is there any way to disable the title attribute in the Scheduler event div?

<div class="rz-event-content" title="PleaseGoAway" style="background: red">

Seems hardcoded. I'm supplying my own mouseEnter tooltip and this is causing both to display.

I suppose I could try something like:

    void OnAppointmentRender(SchedulerAppointmentRenderEventArgs<Appointment> args)
    {
            args.Attributes["title"] = null;      
    }

But this seems a bit rough...

Thanks,
SloSuenos

5

This will be done out of the box when we release the new events.

1 Like
6

I was wrong, I posted too soon. Two @onclicks in the same element cause the RZ10010 error, and while removing one of '@' in front of one of the onclicks stops the error, the stopPropagation will then not work causing unwanted events to fire.

I've tried everything, the only way to get my onclick event to work and not propagate to another event handler was to have the 2nd handler test to determine if the event was passing from the 1st handler or not. I was never able to get @onclick:stopPropagation to work with the Scheduler's event element.

SloSuenos

7

This seems to be a Blazor limitation that I keep forgetting about. I suggest using a button instead of icon:

    <Template Context="data">
        <RadzenStack JustifyContent="Radzen.JustifyContent.SpaceBetween" Orientation="Radzen.Orientation.Horizontal">
            @data.Text
            <RadzenButton @onclick:stopPropagation Click="@(() => OnIconClick(data))" 
        Icon="clear" Size="Radzen.ButtonSize.Small" Variant="Radzen.Variant.Text" />
        </RadzenStack>
    </Template>

Find attached a sample application.
SchedulerDemoApp.zip (322.0 KB)

1 Like