Radzen Steps duplicates if conditions is used

Radzen.Blazor Components
1

Hello!
I need different steps for different cases.
So some of the steps are inside @if statement.

First it works well, but if the state has been changed multiple times - new step numbers created. They are never being removed, only added.

image
image836×144 1.9 KB

Here is the code. .Net 7.0
latest Radzen nuget

2

You can use Visible property of the step item to avoid this.

3

image

here is the code - invalid steps are created

<RadzenCheckBox @bind-Value="_secondStateEnabled"
                TValue="bool">
</RadzenCheckBox>

<RadzenSteps>
    <Steps>
        <RadzenStepsItem>
            <a>
                step 1
            </a>
        </RadzenStepsItem>
        @if (_secondStateEnabled)
        {
            <RadzenStepsItem>
                <a>
                    step 2
                </a>
            </RadzenStepsItem>
        }
        <RadzenStepsItem>
            <a>
                step 3
            </a>
        </RadzenStepsItem>
    </Steps>
</RadzenSteps>


@code {
    private bool _secondStateEnabled;
}
4

Check my previous posts on how to avoid this.

5

sorry, which posts do you mean?

I found that one about dynamic columns: https://blazor.radzen.com/datagrid-conditional-columns-render?theme=material3

I tried to apply it to the steps, but logic in code doesn't work in that case ( refresh is always true).


<RadzenCheckBox @bind-Value="_secondStateEnabled"
                Change=@(() => _refresh = true)
                TValue="bool">
</RadzenCheckBox>

<RadzenSteps>
    <Steps>
        @RenderSteps()
    </Steps>

</RadzenSteps>


@code {
    private bool _secondStateEnabled;
    private bool _refresh;

    RenderFragment RenderSteps()
    {
        return __builder =>
        {
            if (_refresh)
            {
                _refresh = false;
                <text></text>
            }
            else
            {
                <text>
                    <RadzenStepsItem>
                        <a>
                            step 1
                        </a>
                    </RadzenStepsItem>
                    @if (_secondStateEnabled)
                    {
                        <RadzenStepsItem>
                            <a>
                                step 2
                            </a>
                        </RadzenStepsItem>
                    }
                </text>
            }
        };
    }
}
6
1 Like