Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How to use two DropDownList controls in GridView control in ASP.NET

Author: Jeff Nava

In this article, you will learn how to add two DropDownList controls in a Gridview Control.

 

Sometimes you need to add more than one DropDownList in GridView control. I will explain in this article that how you can add two DropDownList controls in GridView control and how you can populate second DropDownList from the first DropDownList.

  1. Open Visual Studio 2010
  2. File > New > Website
  3. Visual basic or Visual C# > ASP.NET Empty Web Site
  4. Website > Add New Item > Web Form
  5. Add a SqlDataSource control in your aspx page and configure it from the little arrow or write code below in your aspx page.

    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
         ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString %>"
         SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]">
    </asp:SqlDataSource>

     
  6. Add a GridView control and write code below in your aspx page.

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
        DataKeyNames="CategoryID" DataSourceID="SqlDataSource1">
        <Columns>
           <asp:BoundField DataField="CategoryID" HeaderText="CategoryID"
               InsertVisible="False" ReadOnly="True" SortExpression="CategoryID" />
          <asp:TemplateField HeaderText="Categories">
               <ItemTemplate>
     
               </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="Products">
             <ItemTemplate>
     
             </ItemTemplate>
          </asp:TemplateField>
       </Columns>
    </asp:GridView>

     
    I have added a <Columns> tag, one <asp:BoundField> tag and two <asp:TemplateField> tags in GridView control. “DataField” attribute of <asp:BoundField> tag is set to CategoryID. We will add two DropDownList controls in <asp:TemplateField> tags.
     
  7.  Add a DropDownList in between first <asp:TemplateField> and bind data like below.

    <asp:TemplateField HeaderText="Categories">
         <ItemTemplate>
             <asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource1" DataValueField="CategoryID"
             DataTextField="CategoryName" AutoPostBack="true" AppendDataBoundItems="true"  SelectedValue='<%# Eval("CategoryID") %>'>
             </asp:DropDownList>
         </ItemTemplate>
     </asp:TemplateField>

     
    “DataSourceID” attribute is set to “SqlDataSource1”. “DataValueField” and “DataTextField” attributes are set to CategoryID and CategoryName respectively. Set “AutoPostBack” and “AppendDataBoundItems” attributes to true. We have get the CategoryID in “SelectedValue” attribute of DropDownList. We will use this attribute in second DropDownList to bind it to first DropDownList.
     
  8. Now add a SqlDataSource and a DropDownList in between second <asp:TemplateField> and bind data like below.

    <asp:TemplateField HeaderText="Products">
      <ItemTemplate>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server"
           ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString %>"
           SelectCommand="SELECT [ProductName], [ProductID], [CategoryID] FROM [Products] WHERE ([CategoryID] = @CategoryID)">
          <SelectParameters>
           <asp:ControlParameter ControlID="DropDownList1" Name="CategoryID"
           PropertyName="SelectedValue" Type="Int32" />
        </SelectParameters>
      </asp:SqlDataSource>
           <asp:DropDownList ID="DropDownList2" DataTextField="ProductName" DataValueField="ProductID"
           DataSourceID="SqlDataSource2" runat="server">
         </asp:DropDownList>
       </ItemTemplate>
    </asp:TemplateField>


    I have get data from Products table in “SqlDataSource2” and I have also mentioned “WHERE” clause with CategoryID. The CategoryID will be selected from ControlParameter and “SelectedValue” attribute of DropDownList will help us to give the CategoryID. The second DropDownList will populate on the basis of CategoryID of first DropDownList. In second DropDownList, I have provided the DataSourceID, DataTextField and DataValueField 
     
  9.  Entire aspx page will look like below

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server"
                ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString %>"
                SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]">
            </asp:SqlDataSource>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
                DataKeyNames="CategoryID" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:BoundField DataField="CategoryID" HeaderText="CategoryID"
                    InsertVisible="False" ReadOnly="True" SortExpression="CategoryID" />
                <asp:TemplateField HeaderText="Categories">
                <ItemTemplate>
                    <asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource1" DataValueField="CategoryID"
                    DataTextField="CategoryName" AutoPostBack="true" AppendDataBoundItems="true"  SelectedValue='<%# Eval("CategoryID") %>'>
                    </asp:DropDownList>
                </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Products">
                <ItemTemplate>
                    <asp:SqlDataSource ID="SqlDataSource2" runat="server"
                     ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString %>"
                     SelectCommand="SELECT [ProductName], [ProductID], [CategoryID] FROM [Products] WHERE ([CategoryID] = @CategoryID)">
                     <SelectParameters>
                        <asp:ControlParameter ControlID="DropDownList1" Name="CategoryID"
                        PropertyName="SelectedValue" Type="Int32" />
                    </SelectParameters>
                    </asp:SqlDataSource>
                    <asp:DropDownList ID="DropDownList2" DataTextField="ProductName" DataValueField="ProductID"
                    DataSourceID="SqlDataSource2" runat="server">
                    </asp:DropDownList>
                </ItemTemplate>
                </asp:TemplateField>
                </Columns>
            </asp:GridView>
           
        </div>
        </form>
    </body>
    </html>
        
  10. Now see the web site in browser.

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How to call server side function from client side script in ASP.NET

Disclaimer - Privacy
© 2002-2017 DevASP.net