Accessing a DropDownList inside a GridView

• Download source code - 2.32 KB

Introduction

This article demonstrates how to bind a DropDownList inside a GridView, and also shows how to bind a TextBox inside a GridView on the SelectedIndexChanged event of the DropDownList.

Using the Code

To start with, add the GridView control to your page, add the bound columns if any, then add two template columns: one for the DropDownList and one for the TextBox. Set the AutoPostBack property to "True" for the DropDownList, and create the SelectedIndexChanged event.

The ASPX code will look like:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" 
  OnRowCommand="GridView1_RowCommand" OnRowDataBound="GridView1_RowDataBound">

<Columns>
<asp:BoundField DataField="CustomerID" HeaderText="Customer ID" />
<asp:BoundField DataField="CustomerName" HeaderText="Customer Name"/>
<asp:TemplateField HeaderText="Sample Dropdown">
<ItemTemplate>
<asp:DropDownList Width="50" runat="server" 
   id="ddlTest" AutoPostBack="true" 
   OnSelectedIndexChanged="ddlTest_SelectedIndexChanged">
</asp:DropDownList> 
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Sample Textbox">
<ItemTemplate>
<asp:TextBox ID="txtTest" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField> 
</Columns>
</asp:GridView>

Let's move on to the code-behind.

The first thing to do is to bind the gird with some sample data. For the sake of simplicity, I am binding the sample data to the grid. For this, I am creating an object of the Customer class, assigning its properties with dummy data, and adding it to the list. Here is the code for this:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        //Creating object of the list.
        List lst = new List();
        //Creating object of the Customer class
        Customer cust1 = new Customer();
        //Assigning properties with Dummy data
        cust1.CustomerID = 1;
        cust1.CustomerName = "Customer1";
        Customer cust2 = new Customer();
        cust2.CustomerID = 2;
        cust2.CustomerName = "Customer2";
        Customer cust3 = new Customer();
        cust3.CustomerID = 3;
        cust3.CustomerName = "Customer3";
        //Adding Customer objects in the list.
        lst.Add(cust1);
        lst.Add(cust2);
        lst.Add(cust3);
        //Assigning the list to the Grid.
        GridView1.DataSource = lst;
        GridView1.DataBind();
    }
}

The second step is to bind the DropDownList with data. To achieve this, we have to use the RowDataBound event of the GridView. This event fires when we bind the data to the GridView. In this event, we need to find the DropDownList control of each row and bind it with some data. Again, for the sake of simplicity, I am binding it with dummy data by creating an object of the dummy class called "DropDownData" and adding these objects to the list, and finally, assigning this list as a datasource to the DropDownList:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    //Checking whether the Row is Data Row
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        //Finding the Dropdown control.
        Control ctrl = e.Row.FindControl("ddlTest");
        if (ctrl != null)
        {
            DropDownList dd = ctrl as DropDownList;
            //Binding the Dropdown with Dummy data.
            List lst = new List();
            DropDownData cust1 = new DropDownData(1, "One");
            DropDownData cust2 = new DropDownData(2, "Two");
            lst.Add(cust1);
            lst.Add(cust2);
            dd.DataTextField = "Text";
            dd.DataValueField = "ID";
            dd.DataSource = lst;
            dd.DataBind();
        }
    }
}

The third and most important step is to handle the SelectedIndexChanged event of the DropDownList. As we have to identify the exact Row of the GridView from where the SelectedIndexChanged event is fired, we need to compare the "ClientID" of the DropDownList with the dropdowns available in all the rows of the GridView. Once the CliendID is matched, we can bind the TextBox with some data of that Row. For simplicity, I am binding the DropDownList's SelectedValue data. You can fire a database query to get real data as well. Here is the code:

protected void ddlTest_SelectedIndexChanged(object sender, EventArgs e))
{
   //Casting sender to Dropdown
   DropDownList ddl = sender as DropDownList;
   //Looping through each Gridview row to find exact Row 
   //of the Grid from where the SelectedIndex change event is fired.
   foreach (GridViewRow row in GridView1.Rows)
   {
      //Finding Dropdown control  
      Control ctrl = row.FindControl("ddlTest") as DropDownList;
        if (ctrl != null)
        {
            DropDownList ddl1 = (DropDownList)ctrl;
            //Comparing ClientID of the dropdown with sender
            if (ddl.ClientID == ddl1.ClientID)
            {
                //ClientID is match so find the Textbox 
                //control bind it with some dropdown data.
                TextBox txt = row.FindControl("txtTest") as TextBox;
                txt.Text = ddl1.SelectedValue;
                break;
            }
        }
   }
}

Sample Classes

public class DropDownData
{
    public DropDownData(int id, string displaytext)
    {
        iD = id;
        text = displaytext;
    }
    int iD;
    public int ID
    {
        get { return iD; }
        set { iD = value; }
    }
    string text;
    public string Text
    {
        get { return text; }
        set { text = value; }
    }
}

public class Customer
{
    public int CustomerID
    {
        get;
        set;
    }

    public string CustomerName
    {
        get;
        set;
    }
}

That's it...