Hello there,
I've been struggling with this issue for a few weeks now, and I've checked across the forum without an account for that time as well.
TLDR: I've got a 'dialog' to show without calling 'dialogService' because I need to pass it values to be able to update the progress bar. However due to the fact that I'm working within a RadzenBody Content Container, it's not being displayed like a dialog that is called from dialogService. Is there any way around this?
I've inherited this project from a former colleague now that they've left and my knowledge of Radzen/Blazor is fairly limited. That said, I've followed their examples left in code, and created a number of different pages since. However now I've come across a page where I need to parse a significant amount of data in the .CS behind the .razor and the processing times for this can be quite long. Therefore I've decided to create a dialog that shows the progress as it's progressing.
However, the previous implementation of a loading dialog, 'FetchingData.razor', using dialogService is as such:
'''
< RadzenContent Container="main">
< ChildContent>
< RadzenCard style="z-index: 2; text-align: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .5)">
< RadzenCard style="margin: 32px auto; width: 80%">
< h3 style="margin: 32px 0">Fetching data please wait....
< RadzenProgressBar Value="100" ShowValue="false" Mode="ProgressBarMode.Indeterminate" Style="display: inline-block; width: 180px; height: 8px; margin-top: 16px" />
< /RadzenCard>
< /RadzenCard>
< /ChildContent>
< /RadzenContent>
'''
This works perfectly fine and displays on top of the entire page whenever called with 'dialogService.OpenAsync("Fetching Data", null, dialogOptions);'
From the last few weeks I've created this on the Razor Page I'm creating itself:
@if (Loading == true)
{
< RadzenContent Container="main">
< RadzenContent>
< RadzenCard style="z-index: 10; text-align: center; position: fixed; top: 0; left: 0; width: 100%; height: 200%; background: rgba(0, 0, 0, .5)">
<RadzenCard @ref="loadingDialog" style="margin: 32px auto; width: 80%; position; top: 50%; left:50%">
@if (counting == true)
{
< h3 style="margin: 32px 0">Fetching data please wait....
< RadzenProgressBar ProgressBarStyle="ProgressBarStyle.Primary" @bind-Value="@progressValue" Max="@progressMaxVal" Unit="@progressMaxValUnit" Style="display: inline-block; width: 180px; height: 8px; margin-top: 16px" />
}
else
{
< h3 style="margin: 32px 0">Finalising....
< RadzenProgressBar Value="100" ShowValue="false" Mode="ProgressBarMode.Indeterminate" Style="display: inline-block; width: 180px; height: 8px; margin-top: 16px" />
}
< /RadzenCard>
< /RadzenCard>
< /RadzenContent>
< /RadzenContent>
}
And I simply set 'Loading' to true if/when any loading is happening. This works fine, relatively, and it counts up and shows the progress the entire way. However, because (I assume) it's simply a part of the Razor on the page and not a new 'page' called by 'dialogService.OpenAsync', it is nested within the Page Body in the MainLayout and the sidebar and header I have aren't obscured as they are within the previously mentioned 'FetchingData' dialog.
From what I understand, I cannot create this as a separate page, akin to 'fetchingData', and call it with 'dialogService.OpenAsync' because I need to pass the construction values for bindValue, Max and Unit. As well as then updating bindValue so that the progress bar does actually progress, all of these values are created and counted in the .cs behind this page.
Is there anyway I can go about either using dialogService to load this as a dialog, therefore solving every issue and still updating the progress value (I'd imagine), or forcing the section of my page (@if(loading = true.....)) to display as if it is a dialog anyway.
Cheers,
Sam