Click here to Skip to main content
14,937,644 members
Articles / Web Development / HTML
Posted 25 Apr 2007


106 bookmarked

AJAX Multi-Task Indicator

Rate me:
Please Sign up or sign in to vote.
4.83/5 (27 votes)
26 Apr 20073 min read
This is a custom webcontrol that shows the progress of long sequential tasks using AJAX to refresh the page

Screenshot - sample.jpg


This is a custom webcontrol that shows the progress of long sequential tasks using AJAX to refresh the page.

I needed this for a web form where the user would click a button and the system would send e-mails for a group of people. To enhance the responsiveness of the system, I had the idea of showing the progress of each e-mail being sent. Then I realized this idea could be used in many other situations where tasks need to be synchronously executed.

Click here to see the webcontrol in action.


I built this custom control on top of Anthem.NET library. I used Anthem because it makes it easy to call server methods using JavaScript and because I'm really comfortable with this library, since I've used it on many projects. You don't need to be familiar with Anthem.NET to use this control, but if you have never used it I recommend you to check it out.

To make the webcontrol fully customizable, I used the GridView as a base class for my control. So you can use how many columns you want and use the styles you like.

Using the code

Keep in mind that this control inherits from a GridView, so you should use it just like a GridView, but with additional properties, events and methods.

There are two ways you can show progress and status changes. Using an image and using a label. You can use both or only one of them. These two progress indicators correspond to two properties: ImageID and LabelID. These properties must contain the ID of an Image and a Label control. If not, you should add them to field templates. If you don't want to use one of them, just ignore the property.

To make things clear, let's see how we would use the control with an image indicator.

<MTI:MultiTaskIndicator runat="server" ID="mtiTasks" ImageID="imgStatus"  
    Width="350px" AutoGenerateColumns="false" CancelButtonID="btnCancel" >
    <HeaderStyle BackColor="navy" Font-Bold="true" ForeColor="white" 
        HorizontalAlign="center" />

        <asp:TemplateField ItemStyle-HorizontalAlign="Center">
                <asp:Image runat="server" ID="imgStatus" 
                    imageUrl="images/arrow.gif" />
        <asp:BoundField DataField="TaskName" HeaderText="Task" 
            ItemStyle-HorizontalAlign="left" />                


There are a few properties we should look at:

  • ImageID – Corresponds to the ID of the Image control declared inside the template field.
  • ProcessingImageURL – The URL of the image that will appear when task is being executed.
  • TaskFinishedImageURL – The URL of the image that will appear when the task is completed. (This image can be changed programmatically).
  • CancelButtonID – If you want to use a cancel button on your form, you should inform the ID of the button.

Now, on the code behind, we should hook the event handlers to the control:

protected override void OnInit(EventArgs e)
    this.mtiTasks.ExecuteTask += 
    new MultiTaskIndicator.MultiTaskIndicator.ExecuteTaskEventHandler(
    this.mtiTasks.TaskEnded += 
    new MultiTaskIndicator.MultiTaskIndicator.TaskEndedEventHandler(
    this.mtiTasks.TaskStarted += 
    new MultiTaskIndicator.MultiTaskIndicator.TaskStartedEventHandler(

Before executing the tasks we must bind the control to a data source containing any list that will represent the tasks.

To start the process we must call the StartTasks method.

void btnStart_Click(object sender, EventArgs e)

Now we have to handle the ExecuteTask event and do whatever task we need. We might need to pass an argument to the TaskEnded event handler. We can do through the UserData property of the MultiTaskIndicatorEventArgs.

void mtiTasks_ExecuteTask(object sender, MultiTaskIndicatorEventArgs e)
    //This is where you execute the task.
    //Notice the MultiTaskIndicatorEventArgs contains 
    //the properties needed to identify the current task        
    //demonstrates how to send data to the TaskEnded event handler
    e.UserData = !(e.Row.RowIndex == 3 || e.Row.RowIndex == 8); 

This is enough to use the basic functionality. But we may want to modify the default behavior depending on a task result. To accomplish that we must intercept the TaskStarted and TaskEnded events.

Here's some code:

void mtiTasks_TaskStarted(object sender, MultiTaskIndicatorEventArgs e)
    e.CurrentBackColor = System.Drawing.Color.LightYellow;

void mtiTasks_TaskEnded(object sender, MultiTaskIndicatorEventArgs e)
    //simulate a situation where we need to change the pre-defined image
    if (!Convert.ToBoolean(e.UserData))
        e.CurrentImageURL = "images/unchecked.gif";            
        e.CurrentBackColor = System.Drawing.Color.White;


I hope you enjoy this piece of software. Download the sample and play with it. There might be other nice features I didn't include because my requirements were very simple and specific. But I'm sure it's customizable enough to be re-used on many situations.

I am opened to ideas and suggestions.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Cassio Mosqueira
Software Developer (Senior) Intelligent Coder
Canada Canada
I've been developing .NET enterprise applications since 2000.

I am originally from Rio de Janeiro and I am currently working at in Ontario.

I also have my own startup where we offer client intake forms.

Comments and Discussions

QuestionMultiTask Indicator Is not moving to next task if i run the application from Eternal Network Pin
cnu.net6-Mar-12 9:55
Membercnu.net6-Mar-12 9:55 
QuestionIE Not Support ? Pin
SahandSOne28-Sep-09 7:02
MemberSahandSOne28-Sep-09 7:02 
Generalfine, but doesn´t work with updatepanel, and anthem.multiview Pin
davidberlin26-Jun-09 3:31
Memberdavidberlin26-Jun-09 3:31 
GeneralSeems ok Pin
TaffyLewis26-Dec-08 4:13
MemberTaffyLewis26-Dec-08 4:13 
GeneralNice example :) Pin
Leistath27-Jun-07 4:02
MemberLeistath27-Jun-07 4:02 
GeneralIs there for .Net 1.1 Pin
Fly Wang5-Jun-07 19:43
MemberFly Wang5-Jun-07 19:43 
GeneralRe: Is there for .Net 1.1 Pin
Cassio Mosqueira7-Jun-07 16:14
MemberCassio Mosqueira7-Jun-07 16:14 
Generalit seems terrific Pin
Libin Chen17-May-07 21:57
MemberLibin Chen17-May-07 21:57 
GeneralEliminating time-out in a Long - running process Pin
Achintya Jha1-May-07 4:33
MemberAchintya Jha1-May-07 4:33 
GeneralRe: Eliminating time-out in a Long - running process Pin
Cassio Mosqueira2-May-07 5:21
MemberCassio Mosqueira2-May-07 5:21 
GeneralRe: Eliminating time-out in a Long - running process Pin
Achintya Jha2-May-07 5:24
MemberAchintya Jha2-May-07 5:24 
GeneralRe: Eliminating time-out in a Long - running process Pin
Cassio Mosqueira2-May-07 12:51
MemberCassio Mosqueira2-May-07 12:51 
QuestionWebservices issue? Pin
RK KL29-Apr-07 14:57
MemberRK KL29-Apr-07 14:57 
AnswerRe: Webservices issue? Pin
Cassio Mosqueira29-Apr-07 18:37
MemberCassio Mosqueira29-Apr-07 18:37 
QuestionMissing file? Pin
LanUx27-Apr-07 6:18
MemberLanUx27-Apr-07 6:18 
AnswerRe: Missing file? Pin
Cassio Mosqueira27-Apr-07 8:06
MemberCassio Mosqueira27-Apr-07 8:06 
GeneralRe: Missing file? Pin
LanUx27-Apr-07 11:20
MemberLanUx27-Apr-07 11:20 
GeneralRe: Missing file? Pin
Cassio Mosqueira27-Apr-07 11:39
MemberCassio Mosqueira27-Apr-07 11:39 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.