DropDownList Inside GridView (Method 1)

 

Introduction:

In one of my previous articles I explained that how you can embed a DropDownList inside the GridView control. You can check out the article at Accessing DropDownList inside the GridView Control. If you look closely you will notice that all the DropDownList inside the GridView contains the same information. In this article I will demonstrate that how you can have DropDownList inside the GridView exposing different information.

Analysis:

There are couple of ways in which you can achieve this task. In this article I will demonstrate the approach of using DataSet to populate the DropDownList inside the GridView. Take a look at the screen shot below so, you will have a clear idea of what you will be learning in this article.

As, you can see in the above image that each DropDownList is different and is populated on the basis of the category type. Now, let's see the code.

The first thing that you need to do is to populate the GridView so that it will have CategoryID and CategoryName. These are the first two columns of the GridView.

private DataSet GetDataSet() { string query = @"SELECT p.CategoryID,p.ProductID, p.ProductName FROM Products p SELECT c.CategoryID,c.CategoryName FROM Categories c"; string connectionString = @"Server=localhost;Database=Northwind;Trusted_Connection=true"; SqlConnection myConnection = new SqlConnection(connectionString); SqlDataAdapter ad = new SqlDataAdapter(query, myConnection); DataSet ds = new DataSet(); ad.Fill(ds); return ds; }

Since, the query consists of two SELECT statements it means that it will return two tables. The table that I am interested in is the Table[1] which contains the result of (SELECT c.CategoryID,c.CategoryName FROM Categories c"). In the Page_Load event you can bind the DataTable to the GridView using the code below: 

protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { // This is because Table[1] contains Categories GridView1.DataSource = GetDataSet().Tables[1]; GridView1.DataBind(); } }

If you run your application now then you will see that your GridView consists of the CategoryID and CategoryName columns but no GridView column. Keep in mind that CategoryID and CategoryName are bound columns.

Add a simple template column to the GridView and place a DropDownList inside the template column. Here is the HTML code for the GridView control.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound"> <Columns> <asp:BoundField DataField="CategoryID" HeaderText="CategoryID" /> <asp:BoundField DataField="CategoryName" HeaderText="Category Name" /> <asp:TemplateField HeaderText="Products"> <ItemTemplate> <asp:DropDownList ID="DropDownList1" runat="server"> </asp:DropDownList> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>

Populating the DropDownList:

Now, it is time to populate the DropDownList control. I used the GridView_RowDataBound event to populate the DropDownList. Take a look at the method below:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { DataTable myTable = new DataTable(); DataColumn productIDColumn = new DataColumn("ProductID"); DataColumn productNameColumn = new DataColumn("ProductName"); myTable.Columns.Add(productIDColumn); myTable.Columns.Add(productNameColumn); DataSet ds = new DataSet(); ds = GetDataSet(); int categoryID = 0; string expression = String.Empty; if (e.Row.RowType == DataControlRowType.DataRow) { categoryID = Int32.Parse(e.Row.Cells[0].Text); expression = "CategoryID = " + categoryID; DropDownList ddl = (DropDownList)e.Row.FindControl("DropDownList1"); DataRow[] rows = ds.Tables[0].Select(expression);   foreach (DataRow row in rows) { DataRow newRow = myTable.NewRow(); newRow["ProductID"] = row["ProductID"]; newRow["ProductName"] = row["ProductName"]; myTable.Rows.Add(newRow); } ddl.DataSource = myTable; ddl.DataTextField = "ProductName"; ddl.DataValueField = "ProductID"; ddl.DataBind(); } }

Explanation of the code:

The first thing I did is to create a DataTable which will contain the ProductID and the ProductName.

DataTable myTable = new DataTable(); DataColumn productIDColumn = new DataColumn("ProductID"); DataColumn productNameColumn = new DataColumn("ProductName"); myTable.Columns.Add(productIDColumn); myTable.Columns.Add(productNameColumn);

After creating the DataTable I get the DataSet using the GetDataSet method. 

DataSet ds = new DataSet(); ds = GetDataSet();

The GridView already contains the CategoryID and CategoryName data since I populated it inside the Page_Load event. On that basis I retrieve the CategoryID from the GridView and generate an expression.

categoryID = Int32.Parse(e.Row.Cells[0].Text); expression = "CategoryID = " + categoryID;

The expression is used on Table[0] and acts as a criteria on the Products table.

DataRow[] rows = ds.Tables[0].Select(expression);

Now, all the products associated with the particular category are inside the DataRow array. I parse through the array and populate the DataTable I created earlier.

foreach (DataRow row in rows) { DataRow newRow = myTable.NewRow(); newRow["ProductID"] = row["ProductID"]; newRow["ProductName"] = row["ProductName"]; myTable.Rows.Add(newRow); }

After the DataTable is populated I simply assign it to the DropDownList.

ddl.DataSource = myTable; ddl.DataTextField = "ProductName"; ddl.DataValueField = "ProductID"; ddl.DataBind();

Conclusion:

After the GridViewRow is databound you will notice that each of the template column contains a DropDownList which displays information related to a particular category. In this article you learnt that how you can create as well as display one to many relationships inside the GridView control using DropDownLists.

I hope you liked the article, happy coding!