CODEWITHSUNDEEP
razorblazor
Prem
Prem

Reputation: 91

Change Component Index at runtime

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 enter image description here

when user set value IsDisplayTextBoxFirst to true then Textbox should rendered at first like attached image enter image description here How do i change component index at runtime according to value of IsDisplayTextBoxFirst property.

Upvotes: 0

Views: 204

Answers (2)

Astrid E.
Astrid E.

Reputation: 2872

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"/>;
}

Upvotes: 2

Surinder Singh
Surinder Singh

Reputation: 1458

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>

Upvotes: 1

Related Questions