Updating Progress Bar Value from server side Callback function

[Felix]

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.

[Felix]

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.

[Slav]

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

[Oliver]

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.

[Slav]

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

[Beryl]

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++;

[Beryl]

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>

[Rumen]

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