Display a progress bar inside a cell of a WebGrid

The WebGrid allows the injection of any type of any HTML object inside a cell, simply by setting the cell's Value property on the server to the desired HTML string. Further, the container for any such HTML element is the cell's rectangle; thus, we can set the width of such an HTML element as a percentage of the cell's width. With this in mind, we can use a "DIV" HTML element, set it's background color as desired, and set its width to the desired percentage of progress.

To accomplish this, handle the InitializeLayout event of the WebGrid to add an unbound column, which will contain the simulated progress bar. Also, handle the InitializeRow event, where the HTML will be added to the cell of this column, with its width set as desired.


Handle the InitializeLayout event of the WebGrid to set its layout properties. For this example, we will add an unbound column which the user is not allowed to update:

private void UltraWebGrid1_InitializeLayout(object sender, Infragistics.WebUI.UltraWebGrid.LayoutEventArgs e)
{
// Configure the WebGrid so that it displays all its data,
// and so the user can update and resize the columns
this.UltraWebGrid1.Width = Unit.Empty;
this.UltraWebGrid1.Height = Unit.Empty;
this.UltraWebGrid1.DisplayLayout.TableLayout = Infragistics.WebUI.UltraWebGrid.TableLayout.Auto;
e.Layout.Bands[0].AllowUpdate = Infragistics.WebUI.UltraWebGrid.AllowUpdate.Yes;
e.Layout.Bands[0].AllowColSizing = Infragistics.WebUI.UltraWebGrid.AllowSizing.Free;

// Add an unbound, not-updatable column to contain show the progress bar
e.Layout.Bands[0].Columns.Add("ProgressBar","Progress Bar");
e.Layout.Bands[0].Columns.FromKey("ProgressBar").AllowUpdate = Infragistics.WebUI.UltraWebGrid.AllowUpdate.No;
}


Handle the InitializeRow event of the WebGrid to populate row-specific information that will be set at the time of data binding. For this example, we will determine the percentage value to use as the width of our progress bar, and use this to inject an HTML DIV element into the Progress Bar cell for this row:


private void UltraWebGrid1_InitializeRow(object sender, Infragistics.WebUI.UltraWebGrid.RowEventArgs e)
{
// Inject a DIV element inside the progress bar cell, using the value in
// the Completed column as the percentage width of the element
e.Row.Cells.FromKey("ProgressBar").Value = "

";
}