Whats the correct way to handle ValueChange-Event in dynamically created SfDateTimePicker component?

[Ferdinand Weinberger]

Hi!

I'm using EventCallback.Factory.Create to attach a ValueChange event to SfDateTimePicker.

But if the event is attached, the control does only accept the first click on the calendar button.

so i can change the date only one time.

please see the attached video how the behaviour is.

this is the code that creates the component with the event:

@page "/dynamicforms"

@RenderForm

@using Syncfusion.Blazor.Calendars


@code{
    private RenderFragment RenderForm => builder =>
    {
        DateTime val = DateTime.Now;

        builder.OpenComponent(0, typeof(Syncfusion.Blazor.Calendars.SfDateTimePicker<DateTime?>));
        builder.AddAttribute(1, "Readonly", false);
        builder.AddAttribute(1, "Value", val);


        builder.AddAttribute(4, "ChildContent", (Microsoft.AspNetCore.Components.RenderFragment)((builder2) =>
        {
            builder2.AddMarkupContent(5, "\r\n    ");
            builder2.OpenComponent<Syncfusion.Blazor.Calendars.DateTimePickerEvents<DateTime?>>(6);
            builder2.AddAttribute(7, "ValueChange", EventCallback.Factory.Create<ChangedEventArgs<DateTime?>>(this, args =>
            {

            }));
            builder2.CloseComponent();
            builder2.AddMarkupContent(8, "\r\n");
        }));


        builder.CloseComponent();
    };
}

regards,

ferdinand

Attachment: video20210211_092005_39b0e9b9.zip

[Sevvandhi Nagulan]

Hi Ferdinand, 

Greetings from Syncfusion support. 

We checked your query. In the code, you have bound the ValueChange event incorrectly. Hence we modified the sample and attached it below. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dynamic_DateTimePicker1550555408 

Please check the above sample and get back to us if you need further assistance. 

Regards, 

Sevvandhi N 

[Ferdinand Weinberger]

Hi Sevvandhi!

thank you for your reply. this solves the problem.

regards,

Ferdinand

[Sevvandhi Nagulan]

Hi Ferdinand, 

Thanks for the update. Please get back to us know if you need further assistance. 

Regards, 

Sevvandhi N 

[Elko]

Hi Sevvandhi Nagulan,

i tried this sample with a breakpoint in the onChange. It does not stop here. Do I need any changes?

Regards

Elko

[Yohapuja Selvakumaran]

Hi Elko,

We have considered this issue "Change event is not triggered when rendering datetimepicker using render fragment" as a bug from our end, and the fix for the issue will be included in our upcoming weekly release which is expected to be scheduled on mid of December.

You can now track the status of the feedback through the below link,

Feedback link:  Change event is not triggered when rendering datetimepicker using render fragment in Blazor | Feedback Portal (syncfusion.com)

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

Regards,

Yohapuja S

[Yohapuja Selvakumaran]

Hi Elko,

We understand the concern regarding the ValueChange event not triggering in the Syncfusion Blazor DatePicker component. Below, we’ve outlined the root cause and solution to address this issue. The issue occurs due to incorrect event binding within the dynamically rendered DatePicker component.

Use the EventCallback.Factory.Create method to properly bind the ValueChange event to the event handler.

builder2.AddAttribute(6, "ValueChange", EventCallback.Factory.Create<ChangedEventArgs<DateTime?>>(this, onChange));

This setup ensures that the ValueChange event is correctly recognized and triggered in the DatePicker component. To assist you further, we’ve prepared examples demonstrating the correct implementation:

Sample : https://blazorplayground.syncfusion.com/htLzsLNigicpIxBS

Regards,

Yohapuja S