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
I think the better solution vs rendering more controls is to just save the data to a list every time a user saves.
Hi @Marcus_E,
You can usually use a for loop. When you increment the length a new row would appear. Something like this:
@for (var i = 0; i < count; i++)
{
<div>
<RadzenTextBox />
</div>
}
<RadzenButton Click="@Increment">Add</RadzenButton>
@code {
int count = 1;
void Increment()
{
count ++;
}
}
Oh of course, I didn't even consider this. Thanks for the tip!
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.
@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 ---------------//
}
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
<RadzenTextBox Value=@context[@column.Key].ToString()
Change=@(value => @context[@column.Key] = value) />
In your case it can be something like
<RadzenDropDown
Value="values[i].PropertyName"
Change=@((object value) => values[i].PropertyName = (string)value))
/>
The important part is deconstructing @bind-Value to Value and Change.