0

My page has two approaches to adding a date to a text box inside the gridview. The user can set a date for all the rows by choosing a date and clicking a button. The code behind updates each row. This is working fine. Now I want to add the calendar to each row.

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

This is outside the gridview and working fine.

<asp:TextBox ID="SetDateTextBox" runat="server"></asp:TextBox>
<ajaxToolkit:PopupControlExtender ID="SetDateTextBox_PopupControlExtender" runat="server" BehaviorID="SetDateTextBox_PopupControlExtender" 
                        DynamicServicePath="" ExtenderControlID="" TargetControlID="SetDateTextBox" PopupControlID="Panel1" Position="Bottom">
                    </ajaxToolkit:PopupControlExtender>

<asp:Panel ID="Panel1" runat="server" Width="200px">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="Black" BorderStyle="Solid" CellSpacing="1" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="250px" NextPrevFormat="ShortMonth" Width="330px">
<DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" Height="8pt" />
<DayStyle BackColor="#CCCCCC" />
<NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" />
<OtherMonthDayStyle ForeColor="#999999" />
<SelectedDayStyle BackColor="#333399" ForeColor="White" />
<TitleStyle BackColor="#333399" BorderStyle="Solid" Font-Bold="True" Font-Size="12pt" ForeColor="White" Height="12pt" />
<TodayDayStyle BackColor="#999999" ForeColor="White" />
</asp:Calendar>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>

Now the problem. I added the calendarExtender to each row inside the templatefield.

<asp:TemplateField HeaderText="FINISH DATE" SortExpression="SCHED_FINISH_DATE">
 <EditItemTemplate>
 <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("SCHED_FINISH_DATE", "{0:d}") %>'></asp:TextBox>
 </EditItemTemplate>
 <ItemTemplate>
 <asp:TextBox ID="FinishDateTextBox" runat="server" Text='<%# Bind("SCHED_FINISH_DATE", "{0:d}") %>' ClientIDMode="AutoID"></asp:TextBox>
 <ajaxToolkit:CalendarExtender ID="FinishDateTextBox_CalendarExtender" runat="server" BehaviorID="FinishDateTextBox_CalendarExtender" 
                            TargetControlID="FinishDateTextBox"/>
</ItemTemplate>
</asp:TemplateField>

I set the textbox ClientIDMode to AutoID. The page loads without error. I click the textbox on row 1 and the calendar works great. Click row 2 and beyond and the calendar does not appear.

redhook99
  • 1
  • 7
  • Why are you using AutoID? Data bound controls use Predictable by default, so you should be using that. In fact you should not set ClientIDMode at all, and rely on whatever is inherited – Andrei Nov 08 '16 at 15:02
  • Andrei. I've seen AutoID suggested in other posts. I've also tried Inherit but again it still doesn't work. – redhook99 Nov 08 '16 at 15:12
  • When I run in google chrome and inspect the HTML there is no ajaxcalender_container beyond row 1. I just have no idea how to code this. Very frustrating that there isn't more help on this topic anywhere. Seems like basic functionality to me. – redhook99 Nov 08 '16 at 19:29

1 Answers1

0

I removed the popupcontrolextender along with the asp:panel and asp:UpdatePanel and replaced with the following code. This calendar will set a global change to all rows. So much cleaner.

<asp:TextBox ID="SetDateTextBox" runat="server"></asp:TextBox>
<ajaxtoolkit:calendarextender ID="CalendarEntender2" runat="server" TargetControlID="SetDateTextBox" />

Then inside the gridview.

<asp:TemplateField HeaderText="FINISH DATE" SortExpression="SCHED_FINISH_DATE" ItemStyle-Width="100">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("SCHED_FINISH_DATE", "{0:d}") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:TextBox ID="FinishDateTextBox" ClientIDMode="AutoID" runat="server" Text='<%# Bind("SCHED_FINISH_DATE", "{0:d}") %>'></asp:TextBox>
<ajaxtoolkit:calendarextender ID="CalendarEntender1" runat="server" TargetControlID="FinishDateTextBox" />
</ItemTemplate>
<ItemStyle Width="100px"></ItemStyle>
</asp:TemplateField>

I still don't understand why the popupextender was causing an issue.

redhook99
  • 1
  • 7