Set CalendarExtender on GridView Row Button Click using C# and VB.Net in ASP.Net

Last Reply 13 days ago By pandeyism

Posted 13 days ago

I want calender in textbox for date when i edit row in gridview on popup window.

<asp:Textbox  id="txtjdate"  runat="server"></asp:Textbox>

 

 

Posted 13 days ago

Hi akhter,

Refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>GridView Add, Edit, Delete AJAX Way</title>
    <link href="CSS/CSS.css" rel="stylesheet" type="text/css" />
    <script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.blockUI.js" type="text/javascript"></script>
</head>
<body style="margin: 0; padding: 0">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:GridView ID="GridView1" runat="server" Width="550px" AutoGenerateColumns="false"
                AlternatingRowStyle-BackColor="#C2D69B" HeaderStyle-BackColor="green" AllowPaging="true"
                OnPageIndexChanging="OnPaging" PageSize="10">
                <Columns>
                    <asp:BoundField DataField="EnrollNumber" HeaderText="Employee ID" HtmlEncode="true" />
                    <asp:BoundField DataField="EmpName" HeaderText="Employee Name" HtmlEncode="true" />
                    <asp:BoundField DataField="FatherName" HeaderText="Father Name" HtmlEncode="true" />
                    <asp:BoundField DataField="SecNam" HeaderText="Section" HtmlEncode="true" />
                    <asp:BoundField DataField="JoinDate" HeaderText="Join Date" HtmlEncode="true" />
                    <asp:TemplateField ItemStyle-Width="30px" HeaderText="CustomerID">
                        <ItemTemplate>
                            <asp:LinkButton ID="lnkEdit" runat="server" Text="Edit" OnClick="Edit"></asp:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
                <AlternatingRowStyle BackColor="#C2D69B" />
            </asp:GridView>
            <asp:Button ID="btnAdd" runat="server" Text="Add" OnClick="Add" />
            <asp:Panel ID="pnlAddEdit" runat="server" CssClass="modalPopup" Style="display: none">
                <br />
                <table align="center">
                    <tr>
                        <td>
                            <asp:Label ID="Label1" runat="server" Text="EnrollNumber"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="txtEnrollNumber" Width="40px" MaxLength="5" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label2" runat="server" Text="EmpName"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="txtEmpName" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label3" runat="server" Text="FatherNam"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="txtFatherNam" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label5" runat="server" Text="SecName"></asp:Label>
                        </td>
                        <td>
                            <asp:DropDownList ID="ddlSecID" runat="server">
                                <asp:ListItem Text="Select" Value="0" />
                                <asp:ListItem Text="Baby" />
                                <asp:ListItem Text="Lazy" />
                            </asp:DropDownList>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label6" runat="server" Text="JoinDate"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="txtJoinDate" runat="server" ReadOnly="true"></asp:TextBox>
                            <cc1:CalendarExtender ID="txtrechargedate_CalendarExtender" runat="server" Enabled="True"
                                TargetControlID="txtJoinDate" PopupPosition="BottomLeft">
                            </cc1:CalendarExtender>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Button ID="btnSave" runat="server" Text="Save" />
                        </td>
                        <td>
                            <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClientClick="return Hidepopup()" />
                        </td>
                    </tr>
                </table>
            </asp:Panel>
            <asp:LinkButton ID="lnkFake" runat="server"></asp:LinkButton>
            <cc1:ModalPopupExtender ID="popup" runat="server" DropShadow="false" PopupControlID="pnlAddEdit"
                TargetControlID="lnkFake" BackgroundCssClass="modalBackground">
            </cc1:ModalPopupExtender>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="GridView1" />
            <asp:AsyncPostBackTrigger ControlID="btnSave" />
        </Triggers>
    </asp:UpdatePanel>
    <script type="text/javascript">
        $(document).ready(function () {
            BlockUI("<%=pnlAddEdit.ClientID %>");
            $.blockUI.defaults.css = {};
        });
        function Hidepopup() {
            $find("popup").hide();
            return false;
        }
        function BlockUI(elementID) {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_beginRequest(function () {
                $("#" + elementID).block({
                    message: '<table align="center"><tr><td><img src="images/loadingAnim.gif"/></td></tr></table>',
                    css: {},
                    overlayCSS: { backgroundColor: '#000000', opacity: 0.6
                    }
                });
            });
            prm.add_endRequest(function () {
                $("#" + elementID).unblock();
            });
        }
    </script>
    </form>
</body>
</html>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

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

private void BindData()
{
    GridView1.DataSource = GetData();
    GridView1.DataBind();
}

private DataTable GetData()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[] { new DataColumn("EnrollNumber", typeof(int)), new DataColumn("EmpName", typeof(string)), new DataColumn("FatherName", typeof(string)), new DataColumn("SecNam", typeof(string)), new DataColumn("JoinDate", typeof(DateTime)) });
    dt.Rows.Add(1, "Mudassar Khan", "ABCD", "Baby", DateTime.Now);
    dt.Rows.Add(2, "Joh Hammod", "EFG", "Lazy", DateTime.Now.AddDays(1));
    dt.Rows.Add(2, "Robert", "RDJ", "Daddy", DateTime.Now.AddDays(2));
    GridView1.DataSource = dt;
    return dt;
}

protected void OnPaging(object sender, GridViewPageEventArgs e)
{
    this.BindData();
    GridView1.PageIndex = e.NewPageIndex;
    GridView1.DataBind();
}

protected void Edit(object sender, EventArgs e)
{
    using (GridViewRow row = (GridViewRow)((LinkButton)sender).Parent.Parent)
    {
        txtEnrollNumber.Text = row.Cells[0].Text;
        txtEmpName.Text = row.Cells[1].Text;
        txtFatherNam.Text = row.Cells[2].Text;
        ddlSecID.ClearSelection();
        if (ddlSecID.Items.FindByText(row.Cells[3].Text) != null)
        {
            ddlSecID.Items.FindByText(row.Cells[3].Text).Selected = true;
        }
        txtJoinDate.Text = Convert.ToDateTime(row.Cells[4].Text).ToString("dd/MM/yyyy");
        popup.Show();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handle Me.Load
        If Not IsPostBack Then
            Me.BindData()
        End If
    End Sub
    Private Sub BindData()
        GridView1.DataSource = GetData()
        GridView1.DataBind()
    End Sub
    Private Function GetData() As DataTable
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn() {New DataColumn("EnrollNumber", GetType(Integer)), New DataColumn("EmpName", GetType(String)), New DataColumn("FatherName", GetType(String)), New DataColumn("SecNam", GetType(String)), New DataColumn("JoinDate", GetType(DateTime))})
        dt.Rows.Add(1, "Mudassar Khan", "ABCD", "Baby", DateTime.Now)
        dt.Rows.Add(2, "Joh Hammod", "EFG", "Lazy", DateTime.Now.AddDays(1))
        dt.Rows.Add(2, "Robert", "RDJ", "Daddy", DateTime.Now.AddDays(2))
        GridView1.DataSource = dt
        Return dt
    End Function

    Protected Sub OnPaging(ByVal sender As Object, ByVal e As GridViewPageEventArgs)
        Me.BindData()
        GridView1.PageIndex = e.NewPageIndex
        GridView1.DataBind()
    End Sub

    Protected Sub Edit(ByVal sender As Object, ByVal e As EventArgs)
        Using row As GridViewRow = CType((CType(sender, LinkButton)).Parent.Parent, GridViewRow)
            txtEnrollNumber.Text = row.Cells(0).Text
            txtEmpName.Text = row.Cells(1).Text
            txtFatherNam.Text = row.Cells(2).Text
            ddlSecID.ClearSelection()
            If ddlSecID.Items.FindByText(row.Cells(3).Text) IsNot Nothing Then
                ddlSecID.Items.FindByText(row.Cells(3).Text).Selected = True
            End If
            txtJoinDate.Text = Convert.ToDateTime(row.Cells(4).Text).ToString("dd/MM/yyyy")
            popup.Show()
        End Using
End Sub

Screenshot