Add DropDownList and Calendar (DatePicker) in ASP.Net GridView EditItemTemplate using C# and VB.Net

Hi indradeo,

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<asp:GridView ID="gvEmployees" DataKeyNames="EmployeeId" runat="server" AutoGenerateColumns="false"
    OnRowEditing="OnEditEmployee" OnRowDataBound="OnRowDataBound" OnRowCancelingEdit="OnCancelEdit">
    <Columns>
        <asp:BoundField DataField="FirstName" HeaderText="Name" />
        <asp:TemplateField HeaderText="City">
            <ItemTemplate>
                <asp:Label ID="lblCity" runat="server" Text='<%# Eval("City")%>'></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:DropDownList ID="ddlCities" runat="server">
                </asp:DropDownList>
            </EditItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Birth Date">
            <ItemTemplate>
                <asp:Label ID="lblBirthDate" runat="server"
                    Text='<%#Convert.ToDateTime(Eval("BirthDate")).ToString("yyyy-MM-dd") %>'></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox ID="txtBirthDate" runat="server"></asp:TextBox>
            </EditItemTemplate>
        </asp:TemplateField>
        <asp:CommandField ShowEditButton="True" />
    </Columns>
</asp:GridView>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript"> 
    $(document).ready(function () {
        $('[id*=txtBirthDate]').datepicker({
            dateFormat: "yy-mm-dd",
            changeMonth: true,
            changeYear: true,
            yearRange: '1950:2050'
        });
    });
</script>

Namespaces

C#

using System.Data;
using System.Configuration;
using System.Data.SqlClient;

VB.Net

Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindGrid();
    }
}

protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow && gvEmployees.EditIndex == e.Row.RowIndex)
    {
        DropDownList ddlCities = (DropDownList)e.Row.FindControl("ddlCities");
        string sql = "SELECT DISTINCT City FROM Employees";
        string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(conString))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter(sql, con))
            {
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    ddlCities.DataSource = dt;
                    ddlCities.DataTextField = "City";
                    ddlCities.DataValueField = "City";
                    ddlCities.DataBind();
                    string selectedCity = DataBinder.Eval(e.Row.DataItem, "City").ToString();
                    if (ddlCities.Items.FindByValue(selectedCity) != null)
                    {
                        ddlCities.Items.FindByValue(selectedCity).Selected = true;
                    }
                }
            }
        }
    }
}

protected void OnEditEmployee(object sender, GridViewEditEventArgs e)
{
    gvEmployees.EditIndex = e.NewEditIndex;
    this.BindGrid();
}

protected void OnCancelEdit(object sender, GridViewCancelEditEventArgs e)
{
    gvEmployees.EditIndex = -1;
    this.BindGrid();
}

private void BindGrid()
{
    string sql = "SELECT * FROM Employees";
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter(sql, con))
        {
            using (DataTable dt = new DataTable())
            {
                sda.Fill(dt);
                gvEmployees.DataSource = dt;
                gvEmployees.DataBind();
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Me.BindGrid()
    End If
End Sub

Protected Sub OnRowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow AndAlso gvEmployees.EditIndex = e.Row.RowIndex Then
        Dim ddlCities As DropDownList = CType(e.Row.FindControl("ddlCities"), DropDownList)
        Dim sql As String = "SELECT DISTINCT City FROM Employees"
        Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using con As SqlConnection = New SqlConnection(conString)
            Using sda As SqlDataAdapter = New SqlDataAdapter(sql, con)
                Using dt As DataTable = New DataTable()
                    sda.Fill(dt)
                    ddlCities.DataSource = dt
                    ddlCities.DataTextField = "City"
                    ddlCities.DataValueField = "City"
                    ddlCities.DataBind()
                    Dim selectedCity As String = DataBinder.Eval(e.Row.DataItem, "City").ToString()
                    If ddlCities.Items.FindByValue(selectedCity) IsNot Nothing Then
                        ddlCities.Items.FindByValue(selectedCity).Selected = True
                    End If
                End Using
            End Using
        End Using
    End If
End Sub

Protected Sub OnEditEmployee(ByVal sender As Object, ByVal e As GridViewEditEventArgs)
    gvEmployees.EditIndex = e.NewEditIndex
    Me.BindGrid()
End Sub

Protected Sub OnCancelEdit(ByVal sender As Object, ByVal e As GridViewCancelEditEventArgs)
    gvEmployees.EditIndex = -1
    Me.BindGrid()
End Sub

Private Sub BindGrid()
    Dim sql As String = "SELECT * FROM Employees"
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(conString)
        Using sda As SqlDataAdapter = New SqlDataAdapter(sql, con)
            Using dt As DataTable = New DataTable()
                sda.Fill(dt)
                gvEmployees.DataSource = dt
                gvEmployees.DataBind()
            End Using
        End Using
    End Using
End Sub

Screenshot