Adding components in runtime

[Seckin Karabacakoglu]

Hello

I want to create and use components on a screen in runtime according to the parameter. This can be a textbox, datepicker or combobox.

Do you have an example on this?

thanks

[Vinitha Jeyakumar]

Hi Seckin,

You can create the Textbox component dynamically in two ways, either using RenderTreeBuilder or using RenderFragment. please check the code below,

Code snippet:

@using Microsoft.AspNetCore.Components;
@using Syncfusion.Blazor.Buttons;
@using Syncfusion.Blazor.Inputs;

    <div id="component-container">
        @DynamicRender
    </div>

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

@code {
    private RenderFragment DynamicRender { get; set; }  

    private RenderFragment CreateComponent() => builder =>
    {
        builder.OpenComponent(0, typeof(SfTextBox));
        builder.AddAttribute(1, "Placeholder", "Enter your text");
        builder.CloseComponent();
    };

    private void RenderComponent()
    {
        DynamicRender = CreateComponent();
    }
}

Similarly, you can create the DatePicker and ComboBox controls using the above solution.

Documentation: https://blazor.syncfusion.com/documentation/textbox/how-to/create-components-dynamically

Regards,

Vinitha