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!