Click here to Skip to main content
13,095,529 members (51,378 online)
Click here to Skip to main content
Add your own
alternative version


103 bookmarked
Posted 25 Apr 2007

AJAX Multi-Task Indicator

, 26 Apr 2007
Rate this:
Please Sign up or sign in to vote.
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.

You may also be interested in...

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 
Hi ,

I have been working with Anthem Multi Task Indicator.

My acctual requirement is, I need to process few orders in the application, So i am using Multi Task indicator to show status of order by order.

I have deployed the application, It will finsih one order and show the status and It will go to next order and process it. We have deployed the application in one of our servers. It is working perfectly if i run the aplication from Local Netowrk.

if i run the same application from out side of the network,then it will process first order and it is not going to next order.

it will simply shows that it is processing first order, Even though all the operations are done for 1st first order.

Please suggest me on this.

Thank you,
Sreeni Pavalla
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 Alves7-Jun-07 16:14
memberCassio Alves7-Jun-07 16:14 
Generalit seems terrific Pin
Louisa Chen17-May-07 21:57
memberLouisa 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 Alves2-May-07 5:21
memberCassio Alves2-May-07 5:21 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.170813.1 | Last Updated 26 Apr 2007
Article Copyright 2007 by Cassio Mosqueira
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid