Need progressbar in GridView ASP.Net

Question

Hello friends,

Please have a look at this image

The image shows a gridview with some columns on an ASPX page (.net 2.0). Here after getting the list of all stocks, i have to create invoices and then to convert those invoices into PDF. What i want is a progress bar in Status column. Rather than showing Pending or Completed status I want to show a progress bar to highlight the process of invoice and pdf creation.

Do you have any idea, how i can do that. If you still not understand then consider uploading images page in Orkut, that shows progressbar as the image is uploaded.

Thanks for sharing your valuable time...

Answer 1

This is a hard thing to accomplish.

The reason why the image upload has a progress bar, is because the client know how much data it has send to the server.

But in this case, the client doesn't know how far the server is, and it's hard for the server to tell the client.

I don't have a solution, but I just want to say it's not straight forward.

Answer 2

This is similar to a question I saw a while ago "Upload large files in .NET"

The upshot of it all was that you should use an AJAX method to update the progress bar intermittently. Some controls already exist for this, as in the answer for that question suggests the JavaScript/Flash library SWFUpload.

Personally, I would re-invent the wheel and write my own AJAX server and client requests to update the form, but that requires some research.

Answer 3

I found a couple of nice Progress Bar controls here and here. Both of them seem relatively easy to use.

The hard part is figuring out how far along you currently are in your processing. Assuming that you have this information, you could simply wrap the GridView in an UpdatePanel that triggers on a Timer control which posts back every n seconds.

Answer 4

To show actual progress you would need to get the status from the server and update the UI at client side. One way is to use HTTP Handlers and AJAX with jQuery.

1. Initiate InvoiceCreation

$("#btnCreateInvoice").click(function() {             
       $.ajax({ type: "POST",  url: "YourHttpHandler.ashx",
       contentType: "text/html; charset=utf-8",
       dataType: "html",  
       success: function(data) { UpdateStatus-Initialize some progressbar plugin }
       });
    });

2. Polling

What next you need to do is to poll the server at 't' interval and get the status. For that we need to call a function at 't' interval that would initiate an AJAX call to a HTTPHandler to get the status.

$(function() {
  setInterval(update, 't');
});

function updateStatus() {
  $.ajax({ type: "POST",  url: "GetStatusHandler.ashx",
       contentType: "text/html; charset=utf-8",
       dataType: "html",  
       success: function(data) { UpdateStatus - Update some progressbar plugin }
       });
}

3. Server side Status Management

In your case there will be a situation where there can be multiple active invoices, so you would need to update/maintain status of all those records every AJAX request.

Also I am not sure you can use ASP.NET Server side progress bar controls with this technique since you would need to update them at client side.