how to add reference(@ref) and get value of that textbox using renderfragment in sftextbox

How to add @ref in sfTextbox using refnderfragment.

I am attaching my code:

SfTextBox TextBoxRef = new SfTextBox();

builder.OpenComponent(renderctr++, typeof(SfTextBox));

builder.AddAttribute(renderctr++, "CssClass", "left");

builder.AddAttribute(renderctr++, "ref", TextBoxRef);

builder.AddAttribute(renderctr++, "ID", "Test");

builder.AddAttribute(renderctr++, "value", "AJ Test");

builder.AddAttribute(renderctr++, "Placeholder", "AJ Place");

builder.CloseComponent();


Using above coding I am getting value as null. I am also getting error on input tag in HTML inspect.

Please let me know if there is any mistake in my code or give me the way to work it out.

I want to use same for numericbox, checkbox, date, time and dropdown controls.

Please provide me the solution. 

It's very urgent.







1 Reply

SI Silambarasan I Syncfusion Team February 27, 2024 02:00 PM UTC

Hi Amish,

Greetings from Syncfusion Support.

We have created a simple sample incorporating the reference within the textbox. Kindly review the provided code snippet and sample for your reference.


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

<div id="component-container">

    @DynamicFragment

</div>

@code {

    private SfTextBox dynamicTextBox;

    private string dynamicContent = "Type here";

    private string value { get; set; }

    protected override void OnInitialized()

    {

        DynamicFragment = builder =>

        {

            builder.OpenComponent<SfTextBox>(0);

            builder.AddAttribute(1, "Placeholder", dynamicContent);

            builder.AddComponentReferenceCapture(2, (value) => dynamicTextBox = value as SfTextBox);

            builder.CloseComponent();

        };

    }

    private void ChangeAttribute()

    {

        dynamicContent = "Enter your text";

        dynamicTextBox.EnableRtl = true;

    }

    private Microsoft.AspNetCore.Components.RenderFragment DynamicFragment;

}

Samplehttps://blazorplayground.syncfusion.com/rNVfDhhBTnCqVVCe


Regards,

Priyanka K


Loader.
Up arrow icon