Bug: Cannot set visible=true via code on RadzenColumn when originally configured as false

Radzen.Blazor Components
1

Consider the following code:

@page "/Test"
<h3>Test</h3>

<RadzenStack Gap="1rem">
    <RadzenRow>
        <RadzenColumn Size="12" SizeMD="6" Class="rz-p-4 rz-border-radius-1" Style="border: var(--rz-grid-cell-border)">
            <RadzenText TextStyle="TextStyle.Subtitle1">Test</RadzenText>
            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
                <RadzenStack Gap="0" Class="rz-text-truncate">
                    <RadzenText TextStyle="TextStyle.Overline" Class="rz-mt-2 rz-my-0" Style="color: var(--rz-text-tertiary-color);">Name</RadzenText>
                    <RadzenRow>
                        <RadzenColumn @ref="_columnVisible">
                            <RadzenButton Icon="edit"  Size="ButtonSize.ExtraSmall" Click="@(args => StartEdit())" />
                            <RadzenText TextStyle="TextStyle.Body1" Class="rz-text-truncate"><b>Hello, World! I'm visible normally</b></RadzenText>
                        </RadzenColumn>
                        <RadzenColumn @ref="_columnInvisible" Visible="false">
                            <RadzenText TextStyle="TextStyle.Body1" Class="rz-text-truncate"><b>Hello, World! I'm usually invisible!</b></RadzenText>
                            <RadzenButton Icon="highlight_off" Size="ButtonSize.ExtraSmall" class="my-1 ms-1" Click="@((args) => CancelEdit())"/>
                        </RadzenColumn>
                    </RadzenRow>
                </RadzenStack>
            </RadzenStack>
        </RadzenColumn>
    </RadzenRow>
</RadzenStack>
@code {
    private RadzenColumn? _columnVisible;
    private RadzenColumn? _columnInvisible;

    private void StartEdit()
    {
        _columnVisible!.Visible = false;
        _columnInvisible!.Visible = true;
    }

    private void CancelEdit()
    {
        _columnVisible!.Visible = true;
        _columnInvisible!.Visible = false;
    }
}

As written I'm unable to make _columnInvisible as visible.

However if you change the initial configuration of _columnVisible to true as in:

<RadzenColumn @ref="_columnInvisible" Visible="true">

then I am able to toggle the visibly accordingly.

It seems like once it's set to false in the HTML code, I cannot override it.

I did also try to handle this using OnAfterRenderAsync but for some reason that didn't want to change the visibility, even though it was being called.

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender)
            CancelEdit();
        await base.OnAfterRenderAsync(firstRender);
    }

It's not just a RadzenColumn - I get the same behavior with a RadzenStack.

Am I missing something here?

Verified using version 4.24.5

2

Can you bind it to a variable?

image
image765×176 8 KB

3

Why yes, @mumfie, yes I apparently can!

Nice save there - certainly gets me past this bug.

Just in case anyone else wants to see what this looks like:

@page "/Test"
<h3>Test</h3>

<RadzenStack Gap="1rem">
    <RadzenRow>
        <RadzenColumn Size="12" SizeMD="6" Class="rz-p-4 rz-border-radius-1" Style="border: var(--rz-grid-cell-border)">
            <RadzenText TextStyle="TextStyle.Subtitle1">Test</RadzenText>
            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
                <RadzenStack Gap="0" Class="rz-text-truncate">
                    <RadzenText TextStyle="TextStyle.Overline" Class="rz-mt-2 rz-my-0" Style="color: var(--rz-text-tertiary-color);">Name</RadzenText>
                    <RadzenRow>
                        <RadzenStack Visible="@IsNotEdit">
                            <RadzenButton Icon="edit"  Size="ButtonSize.ExtraSmall" Click="@(args => StartEdit())" />
                            <RadzenText TextStyle="TextStyle.Body1" Class="rz-text-truncate"><b>Hello, World! I'm visible normally</b></RadzenText>
                        </RadzenStack>
                        <RadzenStack Visible="@_isEdit">
                            <RadzenText TextStyle="TextStyle.Body1" Class="rz-text-truncate"><b>Hello, World! I'm usually invisible!</b></RadzenText>
                            <RadzenButton Icon="highlight_off" Size="ButtonSize.ExtraSmall" class="my-1 ms-1" Click="@((args) => CancelEdit())"/>
                        </RadzenStack>
                    </RadzenRow>
                </RadzenStack>
            </RadzenStack>
        </RadzenColumn>
    </RadzenRow>
</RadzenStack>
@code {

    private bool _isEdit = false;
    private bool IsNotEdit => !_isEdit;

    private void StartEdit()
    {
        _isEdit = true;
    }

    private void CancelEdit()
    {

        _isEdit = false;
    }
}

Many thanks again, @mumfie - your assistance is much appreciated! :partying_face: :tada:

4

Setting Blazor component properties directly (via reference) is generally not working as it won't cause a UI refresh. Instead set them to a property as @mumfie suggested.

5

@korchev - That's how I'm doing it now, however I don't understand the inconsistency. This appears to "work" if the control hasn't been initially set to visble="false".