Using the InitializeRow Event

Before You Begin:

There are times when the underlying data does not contain all of the columns of information required to populate the WebGrid™. In many of these applications the best choice is to add an unbound column to the grid and populate the row values in the InitializeRow event.

The InitializeRow event is also a good place to set appearance properties of the row that are based on values within the row. For instance, the user may want all rows with a discount of greater than 10% to be highlighted with a different background color.

Add a new column in the InitializeLayout event and populate the column values in the InitializeRow event.

Follow These Steps:

This sample project uses the Northwind OrderDetails data table to populate a WebGrid with an unbound column and row specific background color highlights. For more information, see Data Binding.

Start a new Web Forms project.
Before you start writing any code, you should place using/imports directives in your code-behind so you don't need to always type out a member's fully qualified name.
In Visual Basic:
```
Imports Infragistics.WebUI.UltraWebGrid
```
In C#:
```
using Infragistics.WebUI.UltraWebGrid;
```
Run the project and depending on which version of the Northwind database you connect to you should see something like.

This default data is adequate, but the user most likely wants to see is the OrderID, ProductID, Quantity, UnitPrice, Discount and Net. The Net is calculated by multiplying the Quantity by the UnitPrice by the Discount and rounding to two decimal positions. Since there is no Net column, you must add an unbound column. You can clean up some of the formatting at the same time.

There is more than one way get the Net calculated and into the grid. One approach is to add a column to the underlying data, pass each row of the underlying data and calculate the column. This tutorial uses the WebGrid InitializeRow event to perform the calculation of the Net, and set the background color of all rows with over 10% discount to pink.

Add the following code to the InitializeLayout event. This code sets some properties of each column and repositions them to the users specifications. It also adds an unbound column to contain the Net price.

In Visual Basic:

Private Sub UltraWebGrid1_InitializeLayout(ByVal sender As Object, _
  ByVal e As Infragistics.WebUI.UltraWebGrid.LayoutEventArgs) Handles UltraWebGrid1.InitializeLayout
	e.Layout.Bands(0).Columns.FromKey("OrderID").HeaderText = "Order"
	e.Layout.Bands(0).Columns.FromKey("OrderID").CellStyle.HorizontalAlign = HorizontalAlign.Right
	e.Layout.Bands(0).Columns.FromKey("OrderID").Move(0)

	e.Layout.Bands(0).Columns.FromKey("ProductID").HeaderText = "Prod"
	e.Layout.Bands(0).Columns.FromKey("ProductID").CellStyle.HorizontalAlign = HorizontalAlign.Right
	e.Layout.Bands(0).Columns.FromKey("ProductID").Move(1)

	e.Layout.Bands(0).Columns.FromKey("Quantity").HeaderText = "Qty"
	e.Layout.Bands(0).Columns.FromKey("Quantity").CellStyle.HorizontalAlign = HorizontalAlign.Right
	e.Layout.Bands(0).Columns.FromKey("Quantity").Move(2)

	e.Layout.Bands(0).Columns.FromKey("UnitPrice").HeaderText = "Price"
	e.Layout.Bands(0).Columns.FromKey("UnitPrice").CellStyle.HorizontalAlign = HorizontalAlign.Right
	e.Layout.Bands(0).Columns.FromKey("UnitPrice").Format = "c"
	e.Layout.Bands(0).Columns.FromKey("UnitPrice").Move(3)

	e.Layout.Bands(0).Columns.FromKey("Discount").HeaderText = "Disc"
	e.Layout.Bands(0).Columns.FromKey("Discount").CellStyle.HorizontalAlign = HorizontalAlign.Right
	e.Layout.Bands(0).Columns.FromKey("Discount").Format = "p"
	e.Layout.Bands(0).Columns.FromKey("Discount").Move(4)

	' add an unbound column
	e.Layout.Bands(0).Columns.Add("Net", "Net")
	e.Layout.Bands(0).Columns.FromKey("Net").CellStyle.HorizontalAlign = HorizontalAlign.Right
	e.Layout.Bands(0).Columns.FromKey("Net").Format = "c"
End Sub

In C#:

private void UltraWebGrid1_InitializeLayout(object sender, 
  Infragistics.WebUI.UltraWebGrid.LayoutEventArgs e)
{
	e.Layout.Bands[0].Columns.FromKey("OrderID").HeaderText = "Order";
	e.Layout.Bands[0].Columns.FromKey("OrderID").CellStyle.HorizontalAlign = HorizontalAlign.Right;
	e.Layout.Bands[0].Columns.FromKey("OrderID").Move(0);

	e.Layout.Bands[0].Columns.FromKey("ProductID").HeaderText = "Prod";
	e.Layout.Bands[0].Columns.FromKey("ProductID").CellStyle.HorizontalAlign = HorizontalAlign.Right;
	e.Layout.Bands[0].Columns.FromKey("ProductID").Move(1);

	e.Layout.Bands[0].Columns.FromKey("Quantity").HeaderText = "Qty";
	e.Layout.Bands[0].Columns.FromKey("Quantity").CellStyle.HorizontalAlign = HorizontalAlign.Right;
	e.Layout.Bands[0].Columns.FromKey("Quantity").Move(2);

	e.Layout.Bands[0].Columns.FromKey("UnitPrice").HeaderText = "Price";
	e.Layout.Bands[0].Columns.FromKey("UnitPrice").CellStyle.HorizontalAlign = HorizontalAlign.Right;
	e.Layout.Bands[0].Columns.FromKey("UnitPrice").Format = "c";
	e.Layout.Bands[0].Columns.FromKey("UnitPrice").Move(3);

	e.Layout.Bands[0].Columns.FromKey("Discount").HeaderText = "Disc";
	e.Layout.Bands[0].Columns.FromKey("Discount").CellStyle.HorizontalAlign = HorizontalAlign.Right;
	e.Layout.Bands[0].Columns.FromKey("Discount").Format = "p";
	e.Layout.Bands[0].Columns.FromKey("Discount").Move(4);

	// add an unbound column
	e.Layout.Bands[0].Columns.Add("Net", "Net");
	e.Layout.Bands[0].Columns.FromKey("Net").CellStyle.HorizontalAlign = HorizontalAlign.Right;
	e.Layout.Bands[0].Columns.FromKey("Net").Format = "c";
}

Add the following code to the InitializeRow event. This code calculates the value of the Net column from the Quantity, UnitPrice and Discount columns, then if the Discount is greater than 10% the back color of the row is changed to pink.

In Visual Basic:

Private Sub UltraWebGrid1_InitializeRow(ByVal sender As Object, _
  ByVal e As Infragistics.WebUI.UltraWebGrid.RowEventArgs) Handles UltraWebGrid1.InitializeRow
	e.Row.Cells.FromKey("Net").Value = Math.Round(CDec(e.Row.Cells.FromKey("Quantity").Value) _
		* CDec(e.Row.Cells.FromKey("UnitPrice").Value) _
		* (1.0 - CDec(e.Row.Cells.FromKey("Discount").Value)), 2)

	If CDec(e.Row.Cells.FromKey("Discount").Value) > 0.1 Then
		e.Row.Cells.FromKey("Discount").Row.Style.BackColor = Color.Pink
	End If
End Sub

In C#:

private void UltraWebGrid1_InitializeRow(object sender, 
  Infragistics.WebUI.UltraWebGrid.RowEventArgs e)
{
	e.Row.Cells.FromKey("Net").Value = Math.Round((System.Convert.ToDouble(e.Row.Cells.FromKey("Quantity").Value)) * 
		(System.Convert.ToDouble(e.Row.Cells.FromKey("UnitPrice").Value)) * 
		(1.0 - (System.Convert.ToDouble(e.Row.Cells.FromKey("Discount").Value))), 2);

	if((System.Convert.ToDouble(e.Row.Cells.FromKey("Discount").Value)) > 0.1)
		e.Row.Cells.FromKey("Discount").Row.Style.BackColor = Color.Pink;
}

Run the project and you should see something like.

What You Accomplished:

This tutorial shows how to add an unbound column to the WebGrid in the InitializeLayout event and populate that column with values in the InitializeRow event. This methodology has many uses when any column in a row needs to be based on row values and is not a part of the underlying data.

Infragistics(R) NetAdvantage(R) Web Client: ASP.NET
Using the InitializeRow Event
E-mail your feedback on this topic.