# Dynamically rendering input fields

**URL:** <https://forum.radzen.com/t/dynamically-rendering-input-fields/11998>\
**Category:** Blazor Server\
**Created:** [October 14, 2022, 5:28pm UTC](https://forum.radzen.com/t/dynamically-rendering-input-fields/11998 "2022-10-14T17:28:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Marcus\_E](https://forum.radzen.com/user_avatar/forum.radzen.com/marcus_e/32/11443_2.png) [@Marcus\_E](https://forum.radzen.com/u/Marcus_E)\
**Post date:** [October 14, 2022, 5:28pm UTC](https://forum.radzen.com/t/dynamically-rendering-input-fields/11998/1 "2022-10-14T17:28:55Z")

</div>

Hi, I'm using Blazor + Radzen as an admin portal and I want to dynamically generate a duplicate set of the input fields (Variation name, File Url, Quantity) whenever the user clicks on the "+" button. Is this possible? If so can someone point me in the right direction, much appreciated! Here is a screenshot

 ![Screen Shot 2022-10-14 at 10.21.58 AM](https://forum.radzen.com/uploads/default/original/2X/2/2f9828aed1b86ae01ca650ad6832d4d62b328a15.png)

---

<div class="post-metadata">

**Author:** ![Marcus\_E](https://forum.radzen.com/user_avatar/forum.radzen.com/marcus_e/32/11443_2.png) [@Marcus\_E](https://forum.radzen.com/u/Marcus_E)\
**Post date:** [October 14, 2022, 10:12pm UTC](https://forum.radzen.com/t/dynamically-rendering-input-fields/11998/2 "2022-10-14T22:12:32Z")

</div>

I think the better solution vs rendering more controls is to just save the data to a list every time a user saves.

---

<div class="post-metadata">

**Author:** ![korchev](https://forum.radzen.com/user_avatar/forum.radzen.com/korchev/32/4_2.png) [@korchev](https://forum.radzen.com/u/korchev)\
**Post date:** [October 17, 2022, 6:42am UTC](https://forum.radzen.com/t/dynamically-rendering-input-fields/11998/3 "2022-10-17T06:42:42Z")

</div>

Hi @Marcus_E,

You can usually use a for loop. When you increment the length a new row would appear. Something like this:

```auto
@for (var i = 0; i < count; i++)
{
<div>
    <RadzenTextBox />
</div>
}
<RadzenButton Click="@Increment">Add</RadzenButton>
@code {
   int count = 1;

   void Increment()
   {
      count ++;
   }
}

```

---

<div class="post-metadata">

**Author:** ![Marcus\_E](https://forum.radzen.com/user_avatar/forum.radzen.com/marcus_e/32/11443_2.png) [@Marcus\_E](https://forum.radzen.com/u/Marcus_E)\
**Post date:** [October 17, 2022, 2:53pm UTC](https://forum.radzen.com/t/dynamically-rendering-input-fields/11998/4 "2022-10-17T14:53:49Z")

</div>

Oh of course, I didn't even consider this. Thanks for the tip!

---

<div class="post-metadata">

**Author:** ![zehguilherme](https://forum.radzen.com/user_avatar/forum.radzen.com/zehguilherme/32/14952_2.png) [@zehguilherme](https://forum.radzen.com/u/zehguilherme)\
**Post date:** [December 5, 2023, 1:54pm UTC](https://forum.radzen.com/t/dynamically-rendering-input-fields/11998/5 "2023-12-05T13:54:57Z")

</div>

I implemented it in an example here and I would like to know how I can deal with the model property of each field individually.

Example: the field in question has the property `CD_LATERALIDADE` and when I generate a new line (line 2), the new line's field has the same property as the previous one.

I would like to save all the field values of all lines in a variable.

 ![image](https://forum.radzen.com/uploads/default/original/3X/4/9/4945bd78e6c2741abee062a266e343618c8b4cea.png)

```html
@for (int i = 0; i < count; i++)
{
<div class="col-md-4">
    <div class="form-group">
        <RadzenLabel Text="Lateralidade"
                     Component="@campoLateralidade" />

        <RadzenDropDown Name="@campoLateralidade"
                        AllowClear="true"
                        AllowFiltering="true"
                        FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                        Data="listaLateralidades"
                        @bind-Value="modelDadosCirurgia.CD_LATERALIDADE"
                        Placeholder="Selecione uma opção..."
                        TextProperty="Value"
                        ValueProperty="Key"
                        TValue="string"
                        class="w-100" />

        <RadzenRequiredValidator Component="@campoLateralidade"
                                 Text="O campo Lateralidade é obrigatório" />
    </div>
</div>

//------------- More fields ---------------//
}

```

---

<div class="post-metadata">

**Author:** ![korchev](https://forum.radzen.com/user_avatar/forum.radzen.com/korchev/32/4_2.png) [@korchev](https://forum.radzen.com/u/korchev)\
**Post date:** [December 5, 2023, 2:56pm UTC](https://forum.radzen.com/t/dynamically-rendering-input-fields/11998/6 "2023-12-05T14:56:08Z")

</div>

As far as I know `@bind-Value` and similar two-way constructs don't work with array access which makes it a bit difficult to use. It is still possible though - you can follow the approach shown here: [Inline Editing on Dynamic Grid - #5 by korchev](http://forum.radzen.com/t/inline-editing-on-dynamic-grid/11928/5)

```auto
<RadzenTextBox Value=@context[@column.Key].ToString()
       Change=@(value => @context[@column.Key] = value) />
                      

```

In your case it can be something like

```auto
<RadzenDropDown 
    Value="values[i].PropertyName" 
    Change=@((object value) => values[i].PropertyName = (string)value)) 
/>

```

The important part is deconstructing `@bind-Value` to `Value` and `Change`.