Set @bind-Value for dynamically generated SfTimePicker

[Gergo]

Hi!

Is there a way, to set the @bind-Value attribute of a dynamically generated SfTimePicker component? I can set a lot of attributes of it, but when I try to set the @bind-Value it throws the following error:

Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': '@bind-Value' is not a valid attribute name.

Thanks! :)

[Ponmani Murugaiyan]

Hi Gergo, 

Thanks for contacting Syncfusion support. 

We have prepared sample for binding value for the TimePicker component which is generated dynamically using render fragment. We suggest you to bind as like below highlighted code to get rid of the reported error in your end. 

@using Syncfusion.Blazor.Calendars 

@using Syncfusion.Blazor.Buttons 

 

<div id="component-container"> 

    @DynamicRender 

</div> 

 

<SfButton ID="dynamic-button" Content="Render TimePicker" @onclick="RenderComponent"></SfButton> 

 

@code { 

    public DateTime? DateValue { get; set; } = DateTime.Now; 

    private RenderFragment DynamicRender { get; set; } 

    private RenderFragment CreateComponent() => builder => 

    { 

        builder.OpenComponent(0, typeof(SfTimePicker<DateTime>)); 

        builder.AddAttribute(1, "ID", "MyDynamicId"); 

        builder.AddAttribute(2, "Placeholder", "Choose a time"); 

        builder.AddAttribute(3, "Value", Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<DateTime?>(DateValue)); 

        builder.CloseComponent(); 

    }; 

 

    private void RenderComponent() 

    { 

        DynamicRender = CreateComponent(); 

    } 

} 

Output: 

 

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

Regards, 

Ponmani M 

[Gergo]

Hello,

perfect, it works!! :)

Thanks for the quick answer.

Best

Gergő

[Ponmani Murugaiyan]

Hi Gergo, 

Most welcome. We are always happy to assist you. 

Regards, 

Ponmani M