Textbox Calendar Extender in a gridview

[joss Perold]

Hi

I have a a gridview with a number of columns, each column has a textbox with a calendar extender attached. The problem comes when i click on the popup button, it opens a calendar for each row in the column at the same time. So if there are four rows, it will open 4 calendars.

How do i make it only open the one for the specific row i am working with?

I am very new to Ajax so i am rather confused.

  <asp:TemplateField HeaderText="Start Date">
                                <ItemTemplate>
                                    <asp:TextBox ID="txtStartDate" runat="server" Text='<%#Container.DataItem("ConstructionStart") %>' />
                                    <asp:CalendarExtender ID="txtStartDate_CalendarExtender" runat="server" 
                                    Enabled="True" TargetControlID="txtStartDate" Format="d MMMM yyyy" PopupButtonID="CalImage">
                                    </asp:CalendarExtender>
                                    <img id="CalImage" src="http://bytes.com/calImage.png" alt="Click here" /> 
                                </ItemTemplate>
                            </asp:TemplateField>
 
 

[Frinavale]

When the CalendarExtende r is assigned a PopUpButtonID, the calendar will remain open until the user choose a date or until the next time that the user clicks the "button". (IE the user clicks the button control to show the calendar and has to click it again to hide the calendar).

This means that when you assign a PopUpButtonID to a CalendarExtende r, multiple calendars can be open at the same time.

Since you are using an HTML <img> element instead of an ASP.NET Image control, all of the images within your grid will be assigned the same id.

Not only will this make your page invalid (by HTML standards), but it will cause all of the calendar extenders to show at the same time since they are all assigned to the same control (ID).

The ASP.NET Image control is managed by ASP.NET. This means that each control is given a unique "ClientID" by ASP.NET so that your page remains valid and you avoid problems like this (the ClientID property is the id that is assigned the HTML element generated for the ASP.NET control).

So, all you have to do to fix this problem is the following:

<asp:TemplateField HeaderText="Start Date">
  <ItemTemplate>
    <asp:TextBox ID="txtStartDate" runat="server" Text='<%#Container.DataItem("ConstructionStart") %>' />
    <asp:CalendarExtender ID="txtStartDate_CalendarExtender" runat="server" 
          Enabled="True" TargetControlID="txtStartDate" Format="d MMMM yyyy" PopupButtonID="CalImage">
    </asp:CalendarExtender>
    <asp:Image ID="CalImage" runat="server" ImageUrl="~/Images/calImage.png" AlternateText="Click here" /> 
  </ItemTemplate>
</asp:TemplateField>

-Frinny

[joss Perold]

Hi Frinavale

I managed to implement what you said here, but now the problem is that it works fine for one column, but the rest it throws an error for

"The TargetControlID of 'txtPracComplet ion_CalendarExt ender' is not valid. A control with ID 'txtPracComplet ion' could not be found.
"

but the control is there, am i missing something?

  <Columns>           
            <asp:BoundField Visible="False" />
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:TextBox ID="txtConstStart" runat="server" Text='<%#Container.DataItem("ContractorName") %>' />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Construction Start Date">
                <ItemTemplate>
                    <asp:TextBox ID="txtConstStart" runat="server" Text='<%#Container.DataItem("ConstructionStart") %>' />
                    <asp:CalendarExtender ID="txtConstStart_CalendarExtender" runat="server" PopupButtonID="CalImage" Format="d MMMM yyyy" Enabled="True" TargetControlID="txtConstStart">
                    </asp:CalendarExtender>
                    <asp:Image runat="server" id="CalImage" ImageUrl="../../calImage.png"  AlternateText="Click here" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Practical Completion Date">
                <ItemTemplate>
                    <asp:TextBox ID="txtPracCompletion" runat="server" Text='<%#Container.DataItem("PracticalCompletion") %>' />
                    <asp:CalendarExtender ID="txtPracCompletion_CalendarExtender" runat="server" PopupButtonID="CalImage" Format="d MMMM yyyy" Enabled="True" TargetControlID="txtPracCompletion">
                    </asp:CalendarExtender>
                    <asp:Image runat="server" id="CalImage" ImageUrl="../../calImage.png"  AlternateText="Click here" />
                </ItemTemplate>
            </asp:TemplateField>
 
            </Columns>