This is a migrated thread and some comments may be shown as answers.

Updating Progress Bar Value from server side Callback function

7 Answers 864 Views
ProgressBar
This is a migrated thread and some comments may be shown as answers.
Felix
Top achievements
Rank 1
Felix asked on 10 Feb 2015, 02:44 PM
Hello,

We are trying to update a Progress bar from a Callback function that returns progress on a printing job from a code behind function.

The code behind method is as follows:

  private  void ClientOnJobProgress(object sender, JobProgressEventArgs arguments)
        {
            Console.WriteLine("Progress: {0:000}% with job state {1}", arguments.Progress, arguments.State.ToString());
            Progress = arguments.Progress;
            ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "progress", "AdjustProgressBar('" + arguments.Progress + "');", true);

           //  RadProgressBar1.Value = arguments.Progress;       
        }
If I set the Progress Bar Value as in the comments line above , the progress is only updated when the job is 100% complete and does not update during the process.  I tried calling a JavaScript function from the codebehind that finds the progress bar element in the document and tries to update the progress bar value then. Which doesnt update at all.

  function AdjustProgressBar(progressValue) {
                    
                    var progressBar = document.getElementById('<%=RadProgressBar1.ClientID%>');
                    progressBar.value = progressValue;

                } 

What would be the proper way of updating a ProgressBar from a callback function where as to show the updates values? Please advise and thank you in advance.











7 Answers, 1 is accepted

Sort by
0
Felix
Top achievements
Rank 1
answered on 11 Feb 2015, 07:43 PM
My other option is to set the ProgressBar to "Intermediate", we would really like to display percentage to the user though. Please advise if this is possible. Thank you.
0
Slav
Telerik team
answered on 13 Feb 2015, 12:12 PM
Hello Felix,

The RadProgressBar is designed to track a process by manually updating the value of the progress bar on the client when the state of the process changes. This means that the progress bar control does not automatically track the process, so when you set a value for the control, it directly displays it.

To demonstrate a scenario, in which the progress bar is utilized I attached a simple example that uses a progress bar to track changes to a server-side integer variable and communicate back the current value. This is a simulation of a task progress. Please, note that the progress bar should be updated on the client-side using the set_value method (this is why your script did not update the progress bar, you need to use the client-side API of the control for this purpose).

Also, for every new run of the provided sample page, you need to reset IIS, because the tracking integer is static and will not be reset until the web application gets restarted.


If automatic updating of the progress is what you are after, you can use RadProgressArea instead. I would suggest checking the following comparison between RadProgressBar and RadProgressArea in order to choose the control that best suits your requirements: http://www.telerik.com/help/aspnet-ajax/progress-bar-vs-progress-area.html

Regards,
Slav
Telerik
0
Oliver
Top achievements
Rank 1
answered on 03 Nov 2016, 10:01 PM
I tried downloading and running you example but I cannot get the code to compile.   I am running into XMLHttpPanel does not exist from the .cs page.  Yet it clearly exists on the aspx page.  I just put your files into a generic application and called it WebApplication2.  I would really like to figure out how to increment the RadProgressBar from code behind.  Thanks.
0
Slav
Telerik team
answered on 08 Nov 2016, 04:05 PM

Hello Oliver,

 

The example is from a Web Site project, while you are trying to use it in a Web Application. You can either use the example, attached to this post, or just create an empty WebForm in your application and copy the content of the original sample.

 

Regards,
Slav
Telerik by Progress
Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
0
Beryl
Top achievements
Rank 1
answered on 16 Oct 2019, 05:05 PM
I am trying to use your sample code as well.  However, I am not able to pass a parameter to the TrackProgressAsync(), so I cannot figure out how to call it from the click event of my button that is running the long script.  I was trying to use it in my foreach statement so it would update at the end of each loop but for the life of me I cannot figure out how to use it.  In my foreach statement I use in the beginning:
   int progress = 0;
  int z = 1;
progress = (z * 100) / companyList.Count();

 

 

and at the end I have:
taskProgress = progress;

 z++;

 

but I am unable to pass that to the function TrackProgressAsync();

0
Beryl
Top achievements
Rank 1
answered on 16 Oct 2019, 05:42 PM
I cannot seem to get both the server-side script and the client-side scripts to run.  Here is my button:
<button type="button" runat="server" class="btn btn-alt3" id="btnImport" disabled="disabled" onclick="javascript:ShowLoadingPanel(); javascript:startXml();" onserverclick="btnImport_ServerClick" ><i class="icon s7-cloud-download"></i> Import</button>

 

 

if I use as above, only my btnImprt_ServerClick code runs.  If I change onclick to javascript: return startXml() the server code never runs.

0
Rumen
Telerik team
answered on 21 Oct 2019, 01:11 PM

Hi,

The following setup works for me and triggers the client onclic and server onserverclick events:

<script runat="server">
    protected void btnImport_ServerClick(object sender, EventArgs e)
    {
        Response.Write("Server Click fired");
    }
</script>
<button type="button" runat="server" class="btn btn-alt3" id="btnImport" onclick="ShowLoadingPanel();startXml();" onserverclick="btnImport_ServerClick"><i class="icon s7-cloud-download"></i>Import</button>

<script type="text/javascript">
    function ShowLoadingPanel() {
        alert("ShowLoadingPanel client function fired");
        form1.submit();
    }
    function startXml(sender, args) {
        alert("startXml client function fired");
    }
</script>

Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ProgressBar
Asked by
Felix
Top achievements
Rank 1
Answers by
Felix
Top achievements
Rank 1
Slav
Telerik team
Oliver
Top achievements
Rank 1
Beryl
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or