Change Component Index at runtime - razor

Question

How do i change index of Blazor's Component Index at runtime.
Here is code of razor
#page "/datagrid"
#namespace PS
<div class="input-group">
<DxDateEdit #bind-Date="#DateTimeValue"/>
<DxTextBox Text="This is textbox"/>
</div>
#code
{
DateTime DateTimeValue { get; set; } = new DateTime(2022, 1, 1);
public bool IsDisplayTextBoxFirst { get; set; } = false;
}
current Output
when user set value IsDisplayTextBoxFirst to true then Textbox should rendered at first like attached image
How do i change component index at runtime according to value of IsDisplayTextBoxFirst property.

Answer 1

You can use an if/else expression inside your .input-group, as follows:
<div class="input-group">
#if (IsDisplayTextBoxFirst)
{
<DxTextBox Text="This is textbox"/>
<DxDateEdit #bind-Date="#DateTimeValue"/>
}
else
{
<DxDateEdit #bind-Date="#DateTimeValue"/>
<DxTextBox Text="This is textbox"/>
}
</div>
Alternatively, define reusable RenderFragments in your code:
<div class="input-group">
#if (IsDisplayTextBoxFirst)
{
#TextBox
#DateEdit
}
else
{
#DateEdit
#TextBox
}
</div>
#code
{
// Parameters and other logic
private RenderFragment TextBox => __builder =>
{
<DxTextBox Text="This is textbox"/>
};
private RenderFragment DateEdit => __builder =>
{
<DxDateEdit #bind-Date="#DateTimeValue"/>
};
}
As suggested by #henk-holtermann, you could optionally implement the reusable RenderFragments using templated delegates (docs) and not need to reference the __builder at all:
#code
{
// Parameters and other logic
private RenderFragment TextBox => #<DxTextBox Text="This is textbox"/>;
private RenderFragment DateEdit => #<DxDateEdit #bind-Date="#DateTimeValue"/>;
}

Answer 2

You can use conditional rendering and have you code like this
<div class="input-group">
<DxDateEdit #bind-Date="#DateTimeValue"/>
#if(IsDisplayTextBoxFirst){
<DxTextBox Text="This is textbox"/>
}
</div>