Dropdown and its onchange action in gridview in asp.net

The article shows how to add a drop down select control with in the Grid View control in ASP.Net and how to use its OnChange() event.

The following example is for a requirement when we need to insert or visible textbox in the same row from the value selected in the first drop down list.(see image)

Drop down in grid view

when we select ‘Other’ option form dropdown list from first column then textbox in the same row will be visible.

[ASP.Net]

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default8.aspx.cs" Inherits="Default8" %>
 
<!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>Untitled Page</title>
    <script language="javascript" type="text/javascript">
    function CheckEmptyTextBox()
     {
        var grid = document.getElementById("<%= GridView1.ClientID %>");
            //variable to contain the cell of the grid
            var cell;
                for (i=1; i<grid.rows.length; i++)
                {
                    //get the reference of first column
                    cell = grid.rows[i].cells[0];
                     var OtherText =cell.childNodes[1].childNodes[1].value;
                     if(OtherText=='3')
                     {
                     grid.rows[i].cells[1].childNodes[1].childNodes[1].style.display='block'; 
                     }
                     else
                     {
                      grid.rows[i].cells[1].childNodes[1].childNodes[1].style.display='none'; 
                     }
                }
    }
</script>
<script language="javascript" type="text/javascript">
    function CheckEmptyTextBox1()
     {
        var grid = document.getElementById("<%= GridView1.ClientID %>");
            //variable to contain the cell of the grid
            var cell;
                //loop starts from 1. rows[0] points to the header.
                for (i=1; i<grid.rows.length; i++)
                {
                    //get the reference of first column
                    cell = grid.rows[i].cells[0];                
                     var OtherText =cell.childNodes[1].childNodes[1].value;
                     grid.rows[i].cells[1].childNodes[1].childNodes[1].style.display='none'; 
                 }
    }
</script>
</head>
<body onload="CheckEmptyTextBox1()">
    <form id="form1" runat="server">
    <div>
     <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        CellPadding="4" ForeColor="#333333" GridLines="None" Width="284px">
        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
        <Columns>
            <asp:TemplateField HeaderText="Name">                
                <ItemTemplate>
                    <div>
                      <asp:DropDownList ID="DropDownList1" runat="server" onchange="CheckEmptyTextBox();"> 
                            <asp:ListItem Value="0" Text="Select"></asp:ListItem>
                            <asp:ListItem Value="1" Text="Item1"></asp:ListItem>
                            <asp:ListItem Value="2" Text="Item2"></asp:ListItem>
                            <asp:ListItem Value="3" Text="Other" ></asp:ListItem>
                        </asp:DropDownList>                        
                    </div>
                </ItemTemplate>
            </asp:TemplateField>
              <asp:TemplateField HeaderText="Name2">                
                <ItemTemplate>
                    <div id='<%# Container.DataItem %>' >
                          <asp:TextBox ID="TextBox1"  runat="server"  ></asp:TextBox>
                   </div>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <EditRowStyle BackColor="#999999" />
        <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
    </asp:GridView>
   </div>
    </form>
</body>
</html>

[c# code]

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
 
public partial class Default8 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        ArrayList List = new ArrayList();
        List.Add("Alwyn");
        List.Add("");
        List.Add("Duraisingh.M");
        GridView1.DataSource = List;
        GridView1.DataBind();
    }
}