Tip—Using a DropDownList in a DataGrid

This section was really just an afterthought, but we think you'll enjoy it. Many people have asked us how to put some kind of List control (ex: DropDownList) in a DataGrid or DataList. At first thought you might think it would be difficult because each row in the DataGrid or DataList is generated once for each row in the data source. In actuality it is really quite simple to do. In this example (Listing 10.8) we will demonstrate how to use a DropDownList in a DataGrid. We are going to keep the example very simple, but the technique used is going to work for all other situations and controls. The DataGrid in Listing 10.8 has two columns, one is the Company Name and the other is Products. The Products column will contain a DropDownList control with a list of all the suppliers products.

Listing 10.8. Using a DropDownList in a DataGrid
[VisualBasic.NET]

01: <%@ import namespace="System.Data" %>
02: <%@ import namespace="System.Data.SqlClient" %>
03:
04: <script language="vb" runat="server">
05:
06:  private DTProducts as DataView
07:
08:  protected sub Page_Load(sender as Object, e as EventArgs)
09:
10:   Bind()
11:
12:  end sub
13:
14:  private sub Bind()
15:
16:   dim SqlCon as new SqlConnection("server=localhost; uid=sa;pwd=;database=northwind")
17:   dim SqlCmd as new StringBuilder()
18:   dim sda as new SqlDataAdapter("SELECT CompanyName, SupplierID FROM Suppliers",SqlCon)
19:   dim ds as new DataSet()
20:   sda.Fill(ds,"suppliers")
21:   sda.SelectCommand = new SqlCommand("SELECT ProductName, ProductID, SupplierID FROM
 Products", SqlCon)
22:   sda.Fill(ds, "products")
23:   DTProducts = ds.Tables("Products").DefaultView
24:   DGProducts.DataSource = ds.Tables("suppliers")
25:   DGProducts.DataBind()
26:
27:  end sub
28:
29:  private function GetProducts(SupplierID as integer) as DataView
30:
31:   DTProducts.RowFilter = "SupplierID = " & SupplierID
32:   return DTProducts
33:
34:  end function
35:
36: </script>

[C#.NET]

01: <%@ import namespace="System.Data" %>
02: <%@ import namespace="System.Data.SqlClient" %>
03:
04: <script language="c#" runat="server">
05:
06:  private DataView DTProducts;
07:
08:  protected void Page_Load(Object sender, EventArgs e){
09:
10:   Bind();
11:
12:  }
13:
14:  private void Bind() {
15:
16:   SqlConnection SqlCon = new SqlConnection("server=localhost;
 uid=sa;pwd=;database=northwind");
17:   StringBuilder SqlCmd = new StringBuilder();
18:   SqlDataAdapter sda = new SqlDataAdapter("SELECT CompanyName, SupplierID FROM
 Suppliers",SqlCon);
19:   DataSet ds = new DataSet();
20:   sda.Fill(ds,"suppliers");
21:   sda.SelectCommand = new SqlCommand("SELECT ProductName, ProductID, SupplierID FROM
 Products", SqlCon);
22:   sda.Fill(ds, "products");
23:   DTProducts = ds.Tables["Products"].DefaultView;
24:   DGProducts.DataSource = ds.Tables["suppliers"];
25:   DGProducts.DataBind();
26:
27:  }
28:
29:  private DataView GetProducts(int SupplierID){
30:
31:   DTProducts.RowFilter = "SupplierID = " + SupplierID;
32:   return DTProducts;
33:
34:  }
35:
36: </script>
[VisualBasic.NET & C#.NET]
37: <html>
38:   <body>
39:    <head>
40:
41:     <style rel="stylesheet">
42:      H3 {  font: bold 11pt Verdana, Arial, sans-serif; }
43:      .products {  font: 9pt Verdana, Arial, sans-serif; }
44:      .productsHead {  font: bold 9pt Verdana, Arial, sans-serif;
45:       background-color:Maroon; color:white; }
46:      a {  text-decoration:none; }
47:      a:hover {  text-decoration:underline; color:maroon; }
48:    </style>
49:
50:   </head>
51:   <center>
52:     <form runat="server">
53:      <H3>Products on File</H3>
54:
55:      <asp:DataGrid
56:       id="DGProducts"
57:        runat="server"
58:        Cellpadding="4" Cellspacing="0"
59:        BorderWidth="1" Gridlines="None"
60:        AlternatingItemStyle-BackColor="Tan"
61:        HeaderStyle-CssClass="productsHead"
62:        Font-Size="12"
63:        AutoGenerateColumns="false"
64:        >
65:        <Columns>
66:
67:        <asp:BoundColumn DataField="CompanyName" HeaderText="Company" />
68:
69:        <asp:TemplateColumn>
70:        <HeaderTemplate>
71:         Products
72:        </HeaderTemplate>
73:        <ItemTemplate>
74:         <asp:DropDownList
75:         id="DDL"
76:         runat="server"
77:         Width="200"
78:         Border="0"
79:         DataSource='<%# GetProducts(CType(DataBinder.Eval( Container.DataItem,
 "SupplierID"), integer)) %>'
80:         DataTextField="ProductName"
81:         DataValueField="ProductID" />
82:       </ItemTemplate>
83:       </asp:TemplateColumn>
84:
85:      </columns>
86:     </asp:DataGrid>
87:    </form>
88:   <center>
89:  </body>
90: </html>

In Listing 10.8 you'll find the Company Name column on line 67. The Products column, a TemplateColumn, is on lines 69–83 and has a DropDownList control on lines 74–81 within the ItemTemplate. The DataList is bound to a data source in the Bind method, but you'll notice that the DropDownList.DataSource (line 79) is set to the following databinding expression:

[VisualBasic.NET]

<%# GetProducts(CType(DataBinder.Eval(Container.DataItem, "SupplierID"),
integer)) %>

[C#.NET]

<%# GetProducts((int)DataBinder.Eval(Container.DataItem, "SupplierID")) %>

The GetProducts method, lines 29–34, returns a filtered DataView object and has one parameter, SupplierID. Within the GetProducts method the DataView.RowFilter property is used to filter out all the products for a particular supplier based on the SupplierID parameter and uses the DataView created in the Bind method, line 23, as the DataView. Figure 10.8 contains an illustration of this page.

Figure 10.8. DataGrid with a DropDownList server control in one of its columns.


..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.141.19.185