ProgressBar not updating in a DialogContent tag

[WebDev]

I have a relatively long running task and would like to show a Dialog box informing the user stuff is happening with a ProgressBar to show completion progress. However when the ProgressBar is in DialogContent it is not updating the UI when I update the Value of the progressbar.

If I put the progressbar in the body of the page it works as expected.

Razor Code is something like:

<TelerikDialog @bind-Visible="@DialogVisible"
               Width="500px"   
               ShowCloseButton="false"
               CloseOnOverlayClick="false">
    <DialogTitle>Updating</DialogTitle>
    <DialogContent>
        <p>Assigning stuff...</p>
         <TelerikProgressBar Value="@ProgressValue" Max="100"></TelerikProgressBar>
    </DialogContent>
</TelerikDialog>

Then code is:

@code {
	private bool DialogVisible { get; set; } = false;
	private double ProgressValue = 0;

	private async void ButtonClick()
	{
		DialogVisible = true;

		for (var i = 0; i < 20; i++)
		{
			ProgressValue = Math.Round((double)i / 20 * 100);
			StateHasChanged();
			await Task.Delay(1000);
		}
	}
}

 

[Nadezhda Tacheva]

Hi WebDev,

The Dialog will not automatically update to reflect such a programmatic change in its content. To force it to do so, you may invoke the Refresh method of the component instead of calling StateHasChanged():

	TelerikDialog DialogRef;

	private async void ButtonClick()
	{
		DialogVisible = true;

		for (var i = 0; i < 20; i++)
		{
			ProgressValue = Math.Round((double)i / 20 * 100);

			DialogRef.Refresh(); 

			await Task.Delay(1000);

		}
	}

 

Here is a runnable version of the modified code, so you can easily test it: https://blazorrepl.telerik.com/wxaGwFbg34K8Hqy230.

I hope you will find the above information and sample useful. Please let us know if any other questions are raised.

Regards,
Nadezhda Tacheva
Progress Telerik

[Rob]

I'm running into the same issue and this solution is NOT viable.

Adding await Task.Delay(1000) turns a process that normally takes about 1 minute now takes 60 minutes!!

In addition, the long running task is being executed WITHIN the TelerikDialog not from the parent page/component so there is no DialogRef.Refresh.

There MUST be a better way without have to use a Delay and/or Refresh?

As I discovered "StateHasChanged" will not work (Google AI is wrong here).

There must be a more efficient and cleaner approach here?

[Dimo]

Hello Rob,

The delay is not required to be long. Its purpose is to force the Blazor framework to refresh the UI and make the progress routine perceivable by the user. You can use 1 ms.

https://blazorrepl.telerik.com/mflkEbEg265wYLQF42

StateHasChanged() does not work for the Dialog, because the Dialog and its content is not a child of the Razor component, which declares it. They are children of the TelerikRootComponent. By the way, the Dialog Refresh() method simply calls StateHasChanged(), but in the correct context - inside itself.

Finally, note the difference between async void and async Task. The former does not update the UI, while the latter does.