1. Home
  2. Forum
  3. Blazor
  4. ShowProgressValue="true" does not update value

ShowProgressValue="true" does not update value

I have a progress bar that will fill the progress circle, but the text from ShowProgressValue stays at 1%.   Do I need to call a method or something on the progress bar to have the inner text updated?

<SfProgressBar Type="ProgressType.Circular" TrackThickness="8" ProgressThickness="8" Minimum="0" Maximum="100" Value="@progress_pct" ShowProgressValue="true"></SfProgressBar>

@code {
  int progress_pct = 1;  //Have to set to minimum 1 because if it is 0, the progress bar does not fill in.

  private async void onButtonClick(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
  {
      var progress = new Progress<int>(async percent =>
      {
          if (percent > progress_pct)
          {
              progress_pct = percent;
          }
          await InvokeAsync(StateHasChanged);
      });
      await LongRunningTaskWithProgressReports(progress);
  }
}


3 Replies 1 reply marked as answer
SM Srihari Muthukaruppan Syncfusion Team July 16, 2020 12:13 PM UTC

Hi paul,  
   
 
We have analyzed your query. We were able to reproduce the issue in your version and we confirm this as a bug and logged a defect report.You can keep track of the bug from the feedback portal below.  
  
  
The fix will be available in our upcoming weekly patch release which is scheduled to be rolled out on or before July 28th, 2020. 

 
As of now, we can achieve your requirement using the Annotation tag in the progress bar. Based on your requirement, we have prepared a sample for your reference. And also we have attached our demo sample link for your reference. Please find the below sample, code snippet, and screenshot. 
 
   
  
  
Code Snippet:   
  
<SfProgressBar @ref="ProObj1" Type="ProgressType.Circular" StartAngle="240" EndAngle="120" Width="160px" Height="160px"  Value="@progress_pct" TrackThickness="5" ProgressThickness="5" CornerRadius="CornerType.Round" Minimum="0" Maximum="100"  Theme="@CurrentTheme"> 
                <ProgressBarAnimation Enable="true" Duration="2000" Delay="0" /> 
                <ProgressBarAnnotations> 
                    <ProgressBarAnnotation Content="@Annotation" /> 
                </ProgressBarAnnotations> 
            </SfProgressBar> 
 <div class="row" align="center">
 
        <button id="reLoad" class="e-control e-btn e-lib e-outline e-primary" @onclick="ProgressRefresh">Reload</button>
    </div>
 

 
@code{ 
// add your additional code here 
         int progress_pct = 1;
 
        string Annotation;
        public void ProgressRefresh()
        {
               progress_pct = 70;
        }
 
            string CurrentUri; 
            ProgressTheme CurrentTheme; 
            protected override void OnInitialized() 
            { 
                CurrentUri = Navigation.Uri; 
                if (CurrentUri.IndexOf("material") > -1) 
                { 
                    CurrentTheme = ProgressTheme.Material; 
                    Annotation = "<div style='font-size:24px;font-weight:bold;color:#e91e63;fill:#0078D6'><span>100%</span></div>"; 
                } 
                else if (CurrentUri.IndexOf("fabric") > -1) 
                { 
                    CurrentTheme = ProgressTheme.Fabric; 
                    Annotation = "<div style='font-size:24px;font-weight:bold;color:#0078D6;fill:#0078D6'><span>100%</span></div>"; 
                } 
                else if (CurrentUri.IndexOf("bootstrap4") > -1) 
                { 
                    CurrentTheme = ProgressTheme.Bootstrap4; 
                    Annotation = "<div style='font-size:24px;font-weight:bold;color:#007bff;fill:#0078D6'><span>100%</span></div>"; 
                } 
                else if (CurrentUri.IndexOf("bootstrap") > -1) 
                { 
                    CurrentTheme = ProgressTheme.Bootstrap; 
                    Annotation = "<div style='font-size:24px;font-weight:bold;color:#317ab9;fill:#0078D6'><span>100%</span></div>"; 
                } 
                else if (CurrentUri.IndexOf("highcontrast") > -1) 
                { 
                    CurrentTheme = ProgressTheme.HighContrast; 
                    Annotation = "<div style='font-size:24px;font-weight:bold;color:#FFD939;fill:#0078D6'><span>100%</span></div>"; 
                } 
                else 
                { 
                    CurrentTheme = ProgressTheme.Bootstrap4; 
                    Annotation = "<div style='font-size:24px;font-weight:bold;color:#007bff'><span>100%</span></div>"; 
                } 
            } } 
  
// add your additional code here 
  
  
   
Screenshots:  
 

 
  
Let us know if you have any concerns.  
  
Regards,  
Srihari M 


SM Srihari Muthukaruppan Syncfusion Team July 29, 2020 03:55 AM UTC

Hi Paul, 
  
Sorry for the inconvenience. 
  
Due to some technical difficulties, we couldn't include this in our patch release. We will include the fix in our upcoming weekly patch release which is expected to be rolled out on or before August 4, 2020. We appreciate your patience until then. 
  
Regards, 
Srihari M 


SM Srihari Muthukaruppan Syncfusion Team August 4, 2020 10:54 AM UTC

Hi Paul, 
  
Thanks for your patience. 
  
We are glad to announce that our v18.2.48 patch release is rolled out, we have added the fix for the reported scenario. And you can use the latest (18.2.48) Syncfusion.EJ2.Blazor NuGet package version and updated interop CDN file to get rid of the reported issue. 
  
  

 

 
We appreciate your patience in waiting for this release. Kindly let us know if you need further assistance. 
  
Regards, 
Srihari 


Marked as answer
Loader.
Up arrow icon