Creating Progress Bars for DataView WebPart


I had a requirenment to display tasks in a Dataview WebPart, grouped by a field (milestone in my case) . Also I had to create the Progress Bars for all the Tasks under the group, along with a main Progress bar (next to group name )to tell the progres of the whole group.


(click on the image)

To add Progress bar for each task add the below in dataview's xslt (add lines below %column display). You would need to upload Progressbarimage in images library.

To Calculate the over all Percentage(%) for the whole group and display the main\group progress bar, I have used Group header and nodeset parameter.

(click on the image)

The bar is displayed according to the [% complete] column in the task. Upload

To add a new task for a perticular group, I have created ""link for a NewTask.aspx form which will pre-populate the milsestone(group name field) so that the task looks like being added under that group.
(Please see :


Post a Comment


This is a personal weblog. The opinions expressed here represent my own and not those of my employer or anyone else. Should you have any questions or concerns please e-mail me at .

Copyright (c) 2010 @ All rights are reserved.Do Not Copy.

@ Learning