TipUsing a DropDownList in a DataGrid

DropDownList in a DataGrid "-->

only for RuBoard

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.

only for RuBoard