In this article I’m going to explain how to use Ajax CalenderExtender in ASP.NET GridView.

    Today one of my blog subscriber asked me a question that’s how to use Ajax CalenderExtender in ASP.NET GridView. I guess you already know that how to use Ajax CalenderExtender in normal page. There is no different to use Ajax CalenderExtender in normal page and GridView.

          Here I’ll show you how to use Ajax CalenderExtender in GridView EditItemTemplate and FooterTemplate. So first we have to create a page. I have already written article for insert, delete, edit and update records in GridView. You just follow the link given below. And you can create a GridView like that.  

How to insert edit delete update records in Grid view ASP.NET

   Here I have copied only required code for avoiding confusion. If you want you can download entire source code attached along with this article.

Designer Source Code:

<asp:TemplateField HeaderText="Date of Joining">

        <ItemTemplate>

              <asp:Label ID="lblCountry" runat="server"

                       Text='<%#DataBinder.Eval(Container.DataItem, "dateofjoin") %>'></asp:Label>

         </ItemTemplate>              

        <EditItemTemplate>

                  <asp:TextBox ID="txtEditCountry" runat="server"      Text='<%#DataBinder.Eval(Container.DataItem, "dateofjoin") %>'>

                  </asp:TextBox>

                  <asp:CalendarExtender ID="CalendarExtender1" runat="server"

                                    TargetControlID="txtEditCountry"  PopupButtonID="txtEditCountry"                                             Format="dd/MM/yyyy">

                   </asp:CalendarExtender>

          </EditItemTemplate>

          <FooterTemplate>

                   <asp:TextBox ID="txtAddCountry" runat="server"></asp:TextBox>

                   <asp:CalendarExtender ID="CalendarExtender2" runat="server"

                                 TargetControlID="txtAddCountry"  PopupButtonID="txtAddCountry"                                             Format="dd/MM/yyyy">

                    </asp:CalendarExtender>

            </FooterTemplate>

  </asp:TemplateField>