Adding A ProgressBar Column To A RadGrid In A SharePoint WebPart

Posted in SharePoint Development | 1 comment

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:

RadGrid WebPart Adding A ProgressBar Column To A RadGrid In A SharePoint WebPart

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:

Update Percentage 300x57 Adding A ProgressBar Column To A RadGrid In A SharePoint WebPart

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:

C#
< view plain text >
  1. public void InstantiateIn(Control container)
  2. {
  3. UpdatePanel panel = new UpdatePanel();
  4. ProgressBar bar = new ProgressBar();
  5. bar.ID = "bar";
  6. bar.ForeColor = Color.Black;
  7. bar.Width = Unit.Pixel(150);
  8. bar.FillImageUrl = string.Format("{0}/Supporting%20Images/bg.gif", SharePointHelpers.SiteUrl);
  9. bar.BarImageUrl = string.Format("{0}/Supporting%20Images/indicator.gif", SharePointHelpers.SiteUrl);
  10. bar.Visible = true;
  11. bar.Enabled = true;
  12. panel.ContentTemplateContainer.Controls.Add(bar);
  13. container.Controls.Add(panel);
  14. }
  15. }

The template column to add to the grid:

C#
< view plain text >
  1. var x = new GridTemplateColumn();
  2. x.AllowFiltering = false;
  3. x.HeaderText = "Percentage Complete";
  4. x.ItemTemplate = new ProgressBarTemplate();
  5. grid.MasterTableView.Columns.Add(x);

Wire up the data bound event:

C#
< view plain text >
  1. public static void grid_ItemDataBound(object sender, GridItemEventArgs e)
  2. {
  3. var nestedItem = e.Item as GridNestedViewItem;
  4. if (nestedItem != null)
  5. {
  6. Panel panel = (Panel) nestedItem.FindControl("InnerContainer");
  7. TextBox tbPercentage = (TextBox) panel.FindControlRecursive("tbPercentage");
  8. tbPercentage.Text = DataBinder.Eval(e.Item.DataItem, "Percentage") != null
  9. ? DataBinder.Eval(e.Item.DataItem, "Percentage").ToString() : "[None]";
  10.  
  11. TextBox tb = (TextBox) nestedItem.FindControlRecursive("tbPercentage");
  12. GridDataItem parentItem = nestedItem.ParentItem;
  13. ProgressBar bar = (ProgressBar) parentItem.FindControlRecursive("bar");
  14. string x = tb.Text;
  15. bar.Percentage = Convert.ToInt32(x);
  16. }
  17. }

Wire up this prerender event to the grid:

C#
< view plain text >
  1. public void grid_PreRender(object sender, EventArgs e)
  2. {
  3. foreach (GridDataItem y in _grid.Items)
  4. {
  5. if (y.ChildItem != null)
  6. {
  7. GridNestedViewItem nestedItem = y.ChildItem;
  8. TextBox tb = (TextBox) nestedItem.FindControlRecursive("tbPercentage");
  9. ProgressBar bar = (ProgressBar) y.FindControlRecursive("bar");
  10. string x = tb.Text;
  11. bar.Percentage = Convert.ToInt32(x);
  12. }
  13. }
  14. }

Wire up the item created event:

C#
< view plain text >
  1. public static void grid_ItemCreated(object sender, GridItemEventArgs e)
  2. {
  3. var item = e.Item as GridDataItem;
  4. if (item != null)
  5. {
  6. if (item.ChildItem != null)
  7. {
  8. GridNestedViewItem nestedItem = item.ChildItem;
  9. TextBox tb = (TextBox) nestedItem.FindControlRecursive("tbPercentage");
  10. ProgressBar bar = (ProgressBar) item.FindControlRecursive("bar");
  11. string x = tb.Text;
  12. bar.Percentage = Convert.ToInt32(x);
  13. }
  14. }
  15. }

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

share save 171 16 Adding A ProgressBar Column To A RadGrid In A SharePoint WebPart

Related posts:

  1. Best Approach To Adding Telerik Ajax Settings To SharePoint WebPart
  2. Developing A SharePoint Form WebPart – Part 2 – Declare Variables, Assign Controls, And Set up Exception Management
  3. Getting a SharePoint Field Value In C#
  4. Determine If SharePoint List Column Exists In C#
  5. Move List SharePoint WebPart

One Comment

  1. 28-06-2012
    ruby nguyen says:

    This article is very useful.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>