Interactive Dialog

Radzen.Blazor Components
1

Hi. I am kind of new to Blazor but Radzen has been making things so much easier for me.

I am not sure if this is an expected behavior. In dialogs eventcallbacks doesn't seem to update the UI. I get two different behaviors. I've added code snippets and results, I hope that explains the problem.

@inject DialogService DialogService

<div class="rz-p-12 rz-text-align-center">
    <RadzenButton Text="Dialog with inline Blazor content" ButtonStyle="ButtonStyle.Secondary" Click=@ShowInlineDialog />
</div>

@code {
    int orderID = 10248;

    async Task ShowInlineDialog()
    {
        var result = await DialogService.OpenAsync("Simple Dialog", ds =>
        @<RadzenStack Gap="1.5rem">
            <p>Confirm Order ID <b>@orderID</b>?</p>
            <RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.SpaceBetween">
                <RadzenStack Orientation="Orientation.Horizontal">
                    <RadzenButton Text="Ok" Click="() => ds.Close(true)" Style="width: 80px;" />
                    <RadzenButton Text="Cancel" Click="() => ds.Close(false)" ButtonStyle="ButtonStyle.Light" />
                </RadzenStack>
                <RadzenButton Text="Refresh" Click="IncrementNum" ButtonStyle="ButtonStyle.Light" />
            </RadzenStack>
        </RadzenStack>);
    }
       private void IncrementNum()
   {
       orderID++;
   }
}

This does not increment the orderID in the UI.

<RadzenButton Text="Refresh" Click="(() => { orderID = orderID+1; ds.Refresh();})" ButtonStyle="ButtonStyle.Light" />

This updates the UI, the orderID.
Is this an expected behavior? Do we always have to call Refresh method manually to update the UI in dialogs?

2

Yes, you currently have because the content is defined inline. Another easier solution is to define the dialog content in a separate component (its own .razor file). We recommend this approach for dialogs that have their own state which changes often.

3

Thank you for the quick response!
Awesome! I will definitely take that approach then.