Adding A ProgressBar Column To A RadGrid In A SharePoint WebPart

I really thought there would be a tutorial on this on the Telerik website but I couldn’t find anything relevant. In this post, I am going to show you how to add a progress bar column to a RadGrid or RadGridView. So, my goal is to have something like this:

I am just setting the value in a master/detail view in a straight forward TextBox. I am not using AJAX or anything so some of the wiring to maintain values is simply to deal with PostBacks. Just looks like this:

Firstly, I am going to use the one from CodeProject, which is used in a lot of apps, for example the SnapStream project. You can view the SVN version here:

http://source.snapstream.com/repos/WebAdministration/controls/ProgressBar.cs

Blah Blah blah here is the code.

The ITemplate to wire up to the custom column:

[csharp]
public void InstantiateIn(Control container)
{
UpdatePanel panel = new UpdatePanel();
ProgressBar bar = new ProgressBar();
bar.ID = “bar”;
bar.ForeColor = Color.Black;
bar.Width = Unit.Pixel(150);
bar.FillImageUrl = string.Format(“{0}/Supporting%20Images/bg.gif”, SharePointHelpers.SiteUrl);
bar.BarImageUrl = string.Format(“{0}/Supporting%20Images/indicator.gif”, SharePointHelpers.SiteUrl);
bar.Visible = true;
bar.Enabled = true;
panel.ContentTemplateContainer.Controls.Add(bar);
container.Controls.Add(panel);
}
}
[/csharp]

The template column to add to the grid:

[csharp]
var x = new GridTemplateColumn();
x.AllowFiltering = false;
x.HeaderText = “Percentage Complete”;
x.ItemTemplate = new ProgressBarTemplate();
grid.MasterTableView.Columns.Add(x);
[/csharp]
Wire up the data bound event:
[csharp]
public static void grid_ItemDataBound(object sender, GridItemEventArgs e)
{
var nestedItem = e.Item as GridNestedViewItem;
if (nestedItem != null)
{
Panel panel = (Panel) nestedItem.FindControl(“InnerContainer”);
TextBox tbPercentage = (TextBox) panel.FindControlRecursive(“tbPercentage”);
tbPercentage.Text = DataBinder.Eval(e.Item.DataItem, “Percentage”) != null
? DataBinder.Eval(e.Item.DataItem, “Percentage”).ToString() : “[None]”;

TextBox tb = (TextBox) nestedItem.FindControlRecursive(“tbPercentage”);
GridDataItem parentItem = nestedItem.ParentItem;
ProgressBar bar = (ProgressBar) parentItem.FindControlRecursive(“bar”);
string x = tb.Text;
bar.Percentage = Convert.ToInt32(x);
}
}
[/csharp]

Wire up this prerender event to the grid:

[csharp]
public void grid_PreRender(object sender, EventArgs e)
{
foreach (GridDataItem y in _grid.Items)
{
if (y.ChildItem != null)
{
GridNestedViewItem nestedItem = y.ChildItem;
TextBox tb = (TextBox) nestedItem.FindControlRecursive(“tbPercentage”);
ProgressBar bar = (ProgressBar) y.FindControlRecursive(“bar”);
string x = tb.Text;
bar.Percentage = Convert.ToInt32(x);
}
}
}
[/csharp]

Wire up the item created event:

[csharp]
public static void grid_ItemCreated(object sender, GridItemEventArgs e)
{
var item = e.Item as GridDataItem;
if (item != null)
{
if (item.ChildItem != null)
{
GridNestedViewItem nestedItem = item.ChildItem;
TextBox tb = (TextBox) nestedItem.FindControlRecursive(“tbPercentage”);
ProgressBar bar = (ProgressBar) item.FindControlRecursive(“bar”);
string x = tb.Text;
bar.Percentage = Convert.ToInt32(x);
}
}
}
[/csharp]

Like I said depending on the technology you are using you might not need like half of those events.

Share

One thought on “Adding A ProgressBar Column To A RadGrid In A SharePoint WebPart”

Leave a Reply

Your email address will not be published. Required fields are marked *