Using multiple numeric textboxes dynamically

[Seckin Karabacakoglu]

 

Hello

Depending on user selection, more than one numeric textbox can appear on the screen. How many values to enter is determined by the SampleCount parameter. For example ; If Samplecount is 5, there should be 5 numeric textboxes on the screen.

I see numeric texboxes on the screen. However, I cannot detect which numeric texbox the entered value comes from.

I share the sample code section below.

Thanks very much for your help.

@for (int i = 1; i <= Field.SampleCount; i++)

 {

     placeholder = Field.Name + " Sample " + i.ToString();

     if (Field.SampleCount > 1)

         myFieldId = Field.Id.ToString() + "__" + i.ToString();

     else

         myFieldId = Field.Id.ToString();

     <div class="@classValue">

         <SfNumericTextBox TValue="int?"

                           ID="@myFieldId"

                           @key="@myFieldId"

                           FloatLabelType="FloatLabelType.Always"

                           Placeholder="@placeholder"

                           Min="(int)Field.LowerLimit"

                           Max="(int)Field.UpperLimit">

             <NumericTextBoxEvents TValue="int?" ID="@myFieldId" Focus="FocusHandler" ValueChange="@((args)=>ValueChangeHandler(args))"></NumericTextBoxEvents>

         </SfNumericTextBox>

     </div>

 }

protected void ValueChangeHandler(ChangeEventArgs<int?> args)

{

    FormAction.Action?.Invoke();

    var dictionary = new Dictionary<string, object>();

    dictionary.Add(myFieldId, args.Value);

    FormAction.ActionWithParameters?.Invoke(dictionary);

}

[Priyanka Karthikeyan]

Hi Seckin Karabacakoglu,

To identify which SfNumericTextBox the entered value comes from, you can modify your code to pass additional information along with the ValueChange event. Here's an updated version of your code to demonstrate this approach:

 

@foreach (int i in Enumerable.Range(1, 5))
{
    var placeholder = "Sample " + i.ToString();
    var myFieldId = "ID" + i.ToString();

    <SfNumericTextBox TValue="int?"
                      ID="@myFieldId"
                      @key="@myFieldId"
                      FloatLabelType="FloatLabelType.Always"
                      Placeholder="@placeholder">
        <NumericTextBoxEvents ValueChange="(args) => ValueChangeHandler(args, i)" TValue="int?" />
    </SfNumericTextBox>
}

@code {
    protected void ValueChangeHandler(ChangeEventArgs<int?> args, int fieldIndex)
    {
        var fieldName = fieldIndex.ToString() + "th Numeric";
        var enteredValue = args.Value;

        // You can now use fieldName and enteredValue to identify which SfNumericTextBox the value came from
        Console.WriteLine($"Value entered in {fieldName}: {enteredValue}");
    }
}
 

 

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

Regards,

Priyanka K

[Seckin Karabacakoglu]

Hi  Priyanka 

It works exactly as I want. Thank you very much for your support.

Regards

[Priyanka Karthikeyan]

Hi Seckin Karabacakoglu,

Thank you for the update. Please get back to us if you need any further assistance.

Regards,

Priyanka K