Progress bar

Radzen Studio Blazor Server
1

Hello Radzen Team,
my progressbar shows no Text/Unit.

<div class="row" style="text-align: left">
  <div class="col-md-12       col-lg-4 col-xl-4">
    <RadzenProgressBar ShowValue="true" style="border-radius: 4px; float: none; height: 32px; margin-bottom: 20px" Unit="%" Value="@UploadprogressProzent">
    </RadzenProgressBar>
  </div>

but nothing happens:

I cant find the reason for this :thinking:

Please Help
Thomas

2

This is the code:

protected void Uploadprogress(UploadProgressArgs args)
{
    NotificationService.Notify(NotificationSeverity.Info, "OK", $"{args.Loaded} von {args.Total} bytes.", 5000);
    UploadprogressText = $"{args.Loaded} von {args.Total} bytes.";
    UploadprogressProzent = args.Progress;
    if (args.Progress == 100)
    {
        foreach (var file in args.Files)
        {
            NotificationService.Notify(NotificationSeverity.Info, "OK", $"Angehängt: {file.Name} / {file.Size} bytes", 5000);
        }
    }
}

    <div class="row" style="text-align: left">
      <div class="col-md-12         col-lg-12 col-xl-12">
        <RadzenProgressBar ShowValue="true" style="border-radius: 4px; float: none; height: 32px; margin-bottom: 20px" Unit="@UploadprogressText" Value="@UploadprogressProzent" Visible="@(UploadprogressProzent > 0)">
        </RadzenProgressBar>
      </div>
    </div>

the notifier shows the correct test:

https://www.screencast.com/t/UM58FNczHSYF

Any ideas?
Thomas

3

Our online demo shows how to handle upload progress via ProgressBar.

4

i have done it so.
image

image
image786×99 12.5 KB

But it doesnt work:

Thomas

5

Its a problem with the material theme. i tested it in default theme and it works.

and also the "0%" isnt shown in the designer when using material theme.

Thomas

6

By material design specification the progressbar does not display any text and is a lot thinner. The Radzen material theme adheres to that and hides the text. You can show it via CSS:

.ui-progressbar-label {
  display: block !important;
}
7

@korchev,
ah... i understand. Thinking about this design decision.
I think we will handle it with the thinner version and show no text.

Thank you!
Thomas

1 Like