How to set @ref for dynamically generated elements or get ref toelement on event args

[Andreas Wegener]

Hi team.

i have an app that dynamically creates SF controls like checkbox and textbox in a foreach loop.

I created custom control by inheriting from Sftextbox and SfRadiobutton and add a Tag property to store additional information to be used later.

My problem is
how to get a reference to the calling object because I need to read my Tag property to handle further processing

I found this example to create a list of created components

https://www.syncfusion.com/faq/blazor/components/how-to-set-ref-for-dynamically-generated-elements

but that seems not to work in my case a sI may have a list of components

but not the id of the calling component (radiobutton and textbox)

The handler uses ChangedEventArgs

any ideas are welcome.

Many thanks

[YuvanShankar Arunagiri]

Hi Andreas,

We have checked your reported query and prepared the sample code snippet based on your requirement. Refer to the code snippet below.

using the dictionary to create the reference for dynamically created radio button and textbox elements at runtime, and while changing the values in both elements, we can get the instance of respect element ref in value changes events.

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.Inputs

 

@foreach (var id in identifiers)

{

    var radioValue1 = "radio1" + id;

    var radioValue2 = "radio2" + id;

    <SfRadioButton @ref="myRadioBtnComponents[id]" Label="@radioValue1" Name="@id" Value="@radioValue1" TChecked="string" ValueChange="e => onRadioChange(e, myRadioBtnComponents[id])"></SfRadioButton>

    <br />

    <SfRadioButton @ref="myRadioBtnComponents[id]" Label="@radioValue2" Name="@id" Value="@radioValue2" TChecked="string" ValueChange="e => onRadioChange(e, myRadioBtnComponents[id])"></SfRadioButton>

    <br />

    <SfTextBox ID="@id" @ref="myTextboxComponents[id]" Value="@id" ValueChange="e => ValueChangeHandler(e, myTextboxComponents[id])"></SfTextBox>

}

 

@code {

    private List<string> identifiers = new List<string> { "Button1", "Button2", "Button3" };

    private Dictionary<string, SfRadioButton<string>> myRadioBtnComponents = new Dictionary<string, SfRadioButton<string>>();

    private Dictionary<string, SfTextBox> myTextboxComponents = new Dictionary<string, SfTextBox>();

    private void onRadioChange(Syncfusion.Blazor.Buttons.ChangeArgs<string> args, SfRadioButton<string> radioBtnObj)

    {

        var d = radioBtnObj;

    }

    private void ValueChangeHandler(Syncfusion.Blazor.Inputs.ChangedEventArgs args, SfTextBox textboxObj)

    {

        var d = textboxObj;

    }

}

Please check with the above solution, and if you are still facing any issue, then kindly share the entire code snippet of your sample or runnable sample. Based on that, we will check and update a better and quicker solution.

  

Regards, 

YuvanShanakar A

[Andreas Wegener]

many thanks for this snipped. I was also looking into anonymous function 

[Florence Lilian Awino]

Hi Andreas,

We are glad your issue was resolved. Please get back to us if you need further assistance in the future.

Regards,

Florence L.