Click here to Skip to main content
Click here to Skip to main content

Accessing a DropDownList inside a GridView

, 29 Oct 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
Accessing a DropDownList and its events inside a GridView

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...

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Ravindra Nidhonkar
Systems Engineer
India India
I am from India, working as Sr. System Engineer in one of the reputed IT firm, having extensive experience on Asp.net, C#, Ajax.

Comments and Discussions

 
Questionwhen multiple dropdown and eqlly textbox PinprofessionalOmprakash Kukana23-Sep-13 21:38 
QuestionThank you , Thank you , Thank you PinmemberMember 276667218-Jul-12 5:58 
Questionif you use... PinmemberLucio Flavio22-Sep-11 8:30 
GeneralMy vote of 1 PinmemberDaniel Nutu3-Nov-10 5:31 
GeneralDataBinding error. PinmemberLuck)27-Oct-10 18:56 
GeneralRe: DataBinding error. PinmemberRavindra Nidhonkar27-Oct-10 22:17 
Instead of "DDID" use "ID"
i.e.
dd.DataTextField = "Text";
dd.DataValueField = "ID";

General[My vote of 1] Not enough information PinmvpRichard MacCutchan21-Jan-10 0:01 
GeneralRe: [My vote of 1] Not enough information PinmemberRavindra Nidhonkar21-Jan-10 3:27 
GeneralRe: [My vote of 1] Not enough information PinmvpRichard MacCutchan21-Jan-10 5:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.1411023.1 | Last Updated 29 Oct 2010
Article Copyright 2010 by Ravindra Nidhonkar
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid