Accessing DropDownLists inside the GridView Control

In this article I will demonstrate that how you can access the values of the DropDownList which resides in the GridView control. I will show you different ways in which you can extract the values out of the DropDownList and display it on the screen.

 

Introduction:

In this article I will demonstrate that how you can access the values of the DropDownList which resides in the GridView control. I will show you different ways in which you can extract the values out of the DropDownList and display it on the screen.

Adding DropDownList to the GridView Control:

Our first task is to add the DropDownList control to the GridView control. This can be done easily by using the Add New Column Dialog and adding a new template column. After adding a template column simply drag and drop a DropDownList inside the GridView control.

Populating the DropDownList inside the GridView Control:

In this article I will be using the Northwind database, Categories table. I will display Column CategoryName and the Description as the DropDownList columns. Let's see how we can populate the DropDownList controls. As you can see below that each of the method is used to fill a particular DropDownList.

public DataSet GetCategoryNames()

{

SqlConnection myConnection = new SqlConnection(ConnectionString);

SqlDataAdapter ad = new SqlDataAdapter("SELECT CategoryName FROM Categories", myConnection);

DataSet ds = new DataSet();

ad.Fill(ds, "Categories");

return ds;

}

public DataSet GetCategoryDescriptions()

{

SqlConnection myConnection = new SqlConnection(ConnectionString);

SqlDataAdapter ad = new SqlDataAdapter("SELECT Description FROM Categories", myConnection);

DataSet ds = new DataSet();

ad.Fill(ds, "Categories");

return ds;

}

 

Now we need to bind the DataSource property of the DropDownLists to the methods. This can be done using the HTML View of the page. I have also set the DataTextField and the DataValueField property of the DropDownList to the table columns.

 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
<Columns>
<asp:BoundField DataField="CategoryID" HeaderText="CategoryID" />
<asp:TemplateField HeaderText="Category Name">
<ItemTemplate>
<asp:DropDownList DataSource='<%# GetCategoryNames() %>' DataTextField="CategoryName" DataValueField="CategoryName" ID="ddlCategoryName" runat="server">
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<asp:DropDownList DataSource='<%# GetCategoryDescriptions() %>' DataTextField="Description" DataValueField="Description" ID="ddlDescription" runat="server">
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField HeaderText="Select" ShowSelectButton="True" />
</Columns>
<FooterStyle BackColor="White" ForeColor="#000066" />
<RowStyle ForeColor="#000066" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
</asp:GridView>

Binding the DataSource to the GridView:

You also need to bind the DataSource of the GridView control. This is pretty much the same as we did for the DropDownList controls.

private void BindData()

{

SqlConnection myConnection = new SqlConnection(ConnectionString);

SqlDataAdapter ad = new SqlDataAdapter("SELECT * FROM Categories", myConnection);

DataSet ds = new DataSet();

ad.Fill(ds, "Categories");

GridView1.DataSource = ds;

GridView1.DataBind();

}

Now if you run this code you will see the GridView with DropDownList columns which are populated.

Now we need to implement the code for the button click so that when we press the button we can get all the selected values in the DropDownLists. For clarity I have extracted the selected values from both the DropDownList and displayed it on another GridView control.

Button Click Code:

I have created a DataTable object which will hold the selected values of the DropDownList and bind it to another GridView control. All I did is created a GridViewRow instance which iterates through the GridView. GridViewRow uses its FindControl method to extract the values from the particular control. 

// Gets the selected items in the GridView Control

protected void Button1_Click(object sender, EventArgs e)

{

string categoryName = String.Empty;

string description = String.Empty;

DataTable dt = new DataTable();

dt.Columns.Add("CategoryName");

dt.Columns.Add("Description");

foreach (GridViewRow row in GridView1.Rows)

{

categoryName = ((DropDownList)row.FindControl("ddlCategoryName")).SelectedItem.Value;

description = ((DropDownList)row.FindControl("ddlDescription")).SelectedItem.Value;

DataRow dr = dt.NewRow();

dr["CategoryName"] = categoryName;

dr["Description"] = description;

dt.Rows.Add(dr);

}

GridView2.DataSource = dt;

GridView2.DataBind();

}

The result is given in the screen shot below:

Selecting Individual Rows:

The above procedure loops through the whole GridView control and extracts all the rows. If you need only a particular row then you can take advantage of the select column of the GridView. Simply add a select column in the GridView, now whenever you press the select column your selected row will be highlighted and thus activated. When you click on the select column the SelectedIndexChanged event is fired.

protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)

{

string categoryName = ((DropDownList)GridView1.SelectedRow.FindControl("ddlCategoryName")).SelectedItem.Value;

Response.Write(categoryName);

}

 

The code above will simply prints the value from the CategoryName column on the screen.

I hope you liked the article, happy coding!