DataGrid with dropdown column

Introduction

We come across requirements of having custom controls to be kept in DataGrid columns, such as textbox columns, image columns, hyperlink columns, or dropdown columns. In the case of most of such columns, pointing to the appropriate data source and showing data is easy. However, in the case of columns containing dropdown lists where the data needs to be retrieved and shown in each row by making a database call, it becomes a little tricky. In such scenarios, we get stuck many a time, and don't have a solution. This article addresses this issue, and shows a sample code snippet demonstrating how to achieve this. This article can address other commonly faced issues like:

• Inserting a new row in the DataGrid with a dropdown list shown populated.
• Having each row's dropdown list populated with a different data source.

It would be a good idea to address these issues in detail in separate articles rather than clubbing everything here.

Using the code

The sample code below shows:

• How to create a DataGrid with a column containing a DropDownList control in HTML (ASPX page).
• How to populate the DropDownList control contained within the DataGrid column by doing data binding for the DropDownList in the "ItemDatabound()" event handler of the DataGrid.

//
//    The HTML code for defining a datagrid with a custom column say containing a 
//    DropDown list is shown below. The ID given to the DropDown list control here 
//    uniquely identifies it and should be given a meaningful name. This ID will
//    be used in code behind file while populating it.
//

<asp:datagrid id="ProductsGrid" runat="server" 
        Width="280px" ShowFooter="True" 
        AutoGenerateColumns="False" ShowHeader="False">
    <Columns>
        <asp:TemplateColumn>
            <ItemTemplate>
                <asp:dropdownlist CssClass="CellValue" 
                    Width="255px" BackColor="#ffffff" 
                    id="ProductsDescription" Runat="server">
                </asp:dropdownlist>
            </ItemTemplate>
            <FooterTemplate>
                <asp:dropdownlist CssClass="CellValue" 
                    Width="255px" id="NewProductsDescription" 
                    BackColor="#ffcc66" runat="server">
                </asp:dropdownlist>
            </FooterTemplate>
        </asp:TemplateColumn>
    </Columns>
</asp:datagrid>

private void ProductsGrid_ItemDataBound(object sender, 
        System.Web.UI.WebControls.DataGridItemEventArgs e)
{
    //    Get the data from DB to populate the DropDownlist
    SqlConnection conn = new 
      SqlConnection(ConfigurationSettings.AppSettings.Get("ConnectionString"));
                
    DataSet result = new DataSet();


    string cmdText = "Select * from tbl_Products ORDER BY Description";
    SqlDataAdapter dataAdapter = new SqlDataAdapter(cmdText, conn);

    try
    {
        dataAdapter.Fill(result, "Products");

        if(e.Item.ItemType == ListItemType.AlternatingItem ||
            e.Item.ItemType == ListItemType.Item)    
        {
            //    Find the drop down control from datagrid items
            DropDownList list = (DropDownList)
               e.Item.FindControl("ProductsDescription");

            //    Set the text and value properties
            // for the dropdown list to appropriate columns in the
            //     data source
            list.DataTextField = "Description";
            list.DataValueField = "ID";
            list.DataSource = result.Tables["Products"];
            list.DataBind();

            //     Get the footer row and set
            // the properties for the dropdown column there also
            if(e.Item.ItemType == ListItemType.Footer)
            {
                DropDownList list = (DropDownList)
                  e.Item.FindControl("NewMicrosoftProductsDescription"); 
                list.DataTextField = "Description";
                list.DataValueField = "ID";
                list.DataSource = result.Tables["MSProducts"];
                list.DataBind();
                int count = list.Items.Count;
            }
        }
    }
    catch (Exception ex)
    {
        Response.Write("<script language="JavaScript">" + 
            " alert('Populating products list failed with exception: \\'" + 
            ex.Message.Replace("'", "\\'") + 
            "\\'. Close the window and contact" + 
            " Admin!!'); window.close();</script>");

        return;
    }
}