Practical use of the DataGrid's ItemDataBound event.

• Download source - 46.9 Kb

Introduction

Because of its simplicity, flexibility and many possible uses, the DataGrid class is one of the most well known and used classes of the .NET framework. The use of the DataGrid's ItemDataBound event introduces a whole new world of possibilities, letting you conditionally modify displayed data, format, as well as insert some client side code for any cell in your DataGrid. The use of this event can sometimes be a smart alternative to adding calculated columns to a dataset.

The source code available for this tutorial is a working example of what you can do with the ItemDataBound event; a DataGrid displays customer information, a balance value is displayed in red if its value is negative. For the sake of this tutorial, we'll pretend that Jamaica has invaded the North American continent, so North American countries are displayed as "Jamaica" with the insertion of client side code to create a hyperlink and map this link's onClick event to a JavaScript function (popup window). The source code contains an Access database and two web forms; the DataGrid and a form letting the user view complete details of the customer in the popup window.

Background

The ItemDataBound event happens once for every row, after the data is bound to the DataGrid and before the page is rendered to the client.

Using the code

// First we add our handler (OnItemDataBound) to the datagrid's ItemDataBound event
this.myDataGrid.ItemDataBound += new 
  System.Web.UI.WebControls.DataGridItemEventHandler(this.OnItemDataBound);

// This is our handler for the datagrid's ItemDataBound event.
private void OnItemDataBound(object sender, 
        System.Web.UI.WebControls.DataGridItemEventArgs e)
{
    // Check if the current row contains items; if it's
    // a header or footer row that will throw an error
    if (e.Item.ItemType == ListItemType.Item || 
        e.Item.ItemType == ListItemType.AlternatingItem)
    {
        // Get a copy of the "dgLabel2" label that contains the 
        // "Balance" value
        Label lblBalance = (Label)e.Item.FindControl("dgLabel2");
        // Convert the value contained in the label to a double type
        double dblBalance = Convert.ToDouble(lblBalance.Text);
        // If that numeric value is negative
        if(dblBalance < 0)
            // ...display it in red
            e.Item.Cells[3].ForeColor = System.Drawing.Color.Red;
        // Get a copy of the "dgLabel1" label that contains the 
        // "Country" value
        Label lblCountry = (Label)e.Item.FindControl("dgLabel1");
        // ...convert it to a string
        string strCountry = lblCountry.Text;
        // If it's a North American country...
        if(strCountry == "USA" || 
            strCountry == "Mexico" || 
            strCountry == "Canada")
        {
            // Get a copy of the "dgLabel0" label that contains the 
            // "CustomerID" value, we'll use it in the query string 
            // for the popup
            Label lblID = (Label)e.Item.FindControl("dgLabel0");
            // ...convert it to a string
            string strID = lblID.Text;
            // Replace the "Country" value displayed in the datagrid
            // with "Jamaica", placed in a hyperlink who's OnClick 
            // event calls a javascript "popup" window
            e.Item.Cells[2].Text = "<a href=\"popup.aspx?id=" + strID +
                "\" onClick=\"popup(this.href); return false;\">Jamaica</a>";
        }
    }
}

Points of Interest

The ItemCreated event is a close sibling of ItemDataBound. This event happens before ItemDataBound, when the row is created but does not yet contain any data, so you can't use it to read or modify data.