how do I use a calendar popup in a repeater

I would really like to be able to use a calendar popup when editing items in a repeater. I would assume that handling this scenerio would be the same if you did it inside a gridview. Has anyone managed to get this to work and if so would you mind sharing some ideas? My biggest concern is that if you put the calendar control inside of the repeater you will end up with as many calendars as rows on the page which is a lot of extra html. It would be nice to be able to reuse a single calendar.

Thanks,
JustinI'd like to know how to do this as well.

It could be a popup calendar ... or it could be a hover panel that contains the calendar. What I'd like to have is a single extender instance that dynamically allows configuration of the contents of the extender (e.g. setting the date in the calendar for the particular gridrow/repeater data).

Yes - we hear you on the "dynamic configuration" point. I'm thinking through ways to have a unified method of doing that.

On this particular problem, I think what you want to do is to put an extender into the template and then have it point to a panel outside of the gridview. That way you share the popup, and the multiple extender instances don't really cost you very much.

<asp:Panel id="popup" runat="server><asp:Calendar id="cal" ...></Panel>

<asp:DataList>

<EditItemTemplate>

<asp:TextBox id="editTextBox"/>

<atlasToolkit:PopupControlExtender>

<atlasToolkit:PopupControlProperties TargetControlID='editTextBox' PopupControlID="popup"/>

</...>

Yes - we hear you on the "dynamic configuration" point. I'm thinking through ways to have a unified method of doing that.

On this particular problem, I think what you want to do is to put an extender into the template and then have it point to a panel outside of the gridview. That way you share the popup, and the multiple extender instances don't really cost you very much.

<asp:Panel id="popup" runat="server><asp:Calendar id="cal" ...></Panel>

<asp:DataList>

<EditItemTemplate>

<asp:TextBox id="editTextBox"/>

<atlasToolkit:PopupControlExtender>

<atlasToolkit:PopupControlProperties TargetControlID='editTextBox' PopupControlID="popup"/>

</...>

Hi,

Thanks for the information. The only problem that I am not ableto solve is that in the examples, the onselect event for the calendaris fed back to the server which then sets the value of the textbox. At least that is how I understood it worked. How doyou set the value of the current textbox in a grid or repeater using acalendar that is outside of the grid and that posts back to theserver? Is there a way to determine the selected textbox?

Thanks,
Justin

Justin,

Have you taken a look at the CommitScript property of the PopupControl? This allows you to run arbitrary script (including making function calls) when the PopupControl is closed. (Though it probably assumes that the PopupControl is using an UpdatePanel.)

Hi David,

I originally assumed that this is how it would be done, however what I am not clear on is how to do it. I have not been able to figure out how to get the id of the textbox and the value from the control within the context of the script that would be assigned to the CommitScript.

If you have any ideas or know of any helpful documentation it would be much appreciated.

Thanks,
Justin
I am having the same kind of problem with trying to get a popup calendar to show in an InsertTemplate for a FormView. Please see my source below.

<asp:Panel ID="Panel1" runat="server" CssClass="popupControl">
<atlas:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<center>
<asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#999999" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Width="160px" OnSelectionChanged="Calendar1_SelectionChanged" Visible="False">
<SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
<TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
<SelectorStyle BackColor="#CCCCCC" />
<WeekendDayStyle BackColor="#FFFFCC" />
<OtherMonthDayStyle ForeColor="Gray" />
<NextPrevStyle VerticalAlign="Bottom" />
<DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
<TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
</asp:Calendar>
</center
</ContentTemplate>
</atlas:UpdatePanel>
</asp:Panel
<asp:FormView ID="fvInfo" runat="server" DataKeyNames="id" DataSourceID="ds1"
DefaultMode="Insert">
<InsertItemTemplate>
Date of Birth:
<asp:TextBox ID="date_of_birthTextBox" runat="server" Text='<%# Bind("date_of_birth") %>'></asp:TextBox><br /
<asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert"
Text="Insert"></asp:LinkButton
<atlasToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server">
<atlasToolkit:PopupControlProperties TargetControlID="date_of_birthTextBox" PopupControlID="Panel1" Position="Bottom" />
</atlasToolkit:PopupControlExtender>

</InsertItemTemplate>
</asp:FormView
/// <summary>
/// Handler for calendar changes
/// </summary>
/// <param name="sender">source</param>
/// <param name="e">arguments</param>
protected void Calendar1_SelectionChanged( object sender, EventArgs e )
{
// Popup result is the selected date
int iIndex = 0, iTxtIndex = -1;
AtlasControlToolkit.PopupControlExtender pExt = null;

foreach ( Control pCntrl in fvInfo.Controls )
{
if ( pCntrl.ID == "PopupControlExtender1" )
pExt = (AtlasControlToolkit.PopupControlExtender) pCntrl;

if ( pCntrl.ID == "date_of_birthTextBox" )
iTxtIndex = iIndex;

if ( (iTxtIndex >= 0) && (pExt != null) )
break;

iIndex++;
}
if((pExt != null) && (iTxtIndex >= 0))
pExt.Commit( fvInfo.Controls[iIndex], Calendar1.SelectedDate.ToShortDateString() );
}
This is where things are getting very tricky ... I may have worked my way into a solution.

BE AWARE OF THE FOLLOWING: The extenders are using the ClientID. If you have a simple form and no master ... ID == ClientID for top level controls.

If you are using FormView/GridView ... ClientID != ID.

If you are using Master ... ClientID != ID.

If you are using dynamic (non-markup driven template, i.e. custom ITemplate implementations) ... then you need to do the work yourself to ensure that you are providing the correct ClientID.

This is why I believe that I've seen a variety of problems raised ... folks are cut & pasting markup from a simple page into a much more complicated page and not accounting for this. And/Or the toolkit as of April CTP is not accounting for this.

While this isn't a solution ... it is what I've been learning the hard way ... hope it helps.

Yes - the extenders highlight ASP.NET naming semantics in very focused way. Most other ASP.NET things don't reference each other directly so you're able to avoid running into this.

The Toolkit can't do a ton to help you here. But one of the great things about being alpha-type code is that we can try things.

So in the refresh release (today or tomorrow probably), we've added an event to the extender that you can handle to help with this. Basically if we fail to find a control based on ID, we'll raise the event, hand you the ID, and give you a chance to find it. It might be a super helpful thing, it might just be a lot of rope, we'll see.

I have worked with various Microsoft development environments for anumber years now. This is quickly becoming the most fun becauseof the interaction with the guys who are building the code. Ihave to say thanks for the openness with these controls and the speedthat new items are released. I know that I am looking forward tothe next drop. I'll be playing with the events as soon as yourelease.

Thanks for the help and for listening.
Justin

Wow - thanks for saying that. That's really the goal, and just hearing that it's working makes it all worth it.

We're having a blast too, by the way. :)

How do I incease the width of CalendarExtender?

All,

I'm not able to increase the width of the calendar extender. I changed the width inside Calendar.css and set the property of CalendarExtender to point to this css class. Yet I don't see the changes. Do I need to put the class name as the "CssClass" value or should it be the filename (Calendar.css)?

Hi VivekSriAus,

Please read this: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Calendar/Calendar.aspx

Here they say that the default css will be used, except for the values that you override.

I made the width of the calendar change by doing the following:
(Note that I see the width increase but that the style in a whole is not perfect! I'm just showing you how to play around with it!)

<cc1:CalendarExtender ID="CalendarExtender1"
runat="server" Enabled="True" TargetControlID="TextBox1"CssClass="test">
</cc1:CalendarExtender
<style type="text/css">
.test.ajax__calendar_body
{
width:500px;
}
</style>

Go to the link if you want to know where you should override what style. On the link they talk about the css.

Kind regards,
Wim

Thanks for the reply. Although that helped me solve the "width" issue, I'm losing all the other styles. How do I add style to, say, ajax__Calendar_previous? I can't use the same class name, right?

Hi,

Ok maybe this is a bit better style:

.test.ajax__calendar_container {padding:10px;position:absolute;cursor:default;width:350px;font-size:15px;text-align:center;font-family:tahoma,verdana,helvetica;background-color:lemonchiffon;border:1pxsolid#646464;}

But just play around with it a bit.

In the toolkit example is also a calendar with custom styling.

Also, go to the Calendar.css and check out the styles ... play around with them.

You also must read this:

http://mattberseth.com/blog/2007/10/theming_the_ajaxcontroltoolkit.html

Kind regards,
Wim

How do I get the CalendarExtender to show Gridview Templete Field

Hi

i want to use Calendar Extender Control in My grid view's temple field how can i use that calendar control

Code (calendar extender is associated with End Date):

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="Employee Id,Start Date" DataSourceID="SqlDataSource1">
<Columns>
<asp:CommandField ShowEditButton="True" />
<asp:BoundField DataField="Employee Id" HeaderText="Employee Id" ReadOnly="True" SortExpression="Employee Id" />
<asp:TemplateField HeaderText="Start Date" SortExpression="Start Date">
<EditItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("[Start Date]") %>'></asp:Label>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("[Start Date]") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="End Date" SortExpression="End Date">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("[End Date]") %>'></asp:TextBox>
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="Textbox1">
</cc1:CalendarExtender>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("[End Date]") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>

How can I send the date from one calendar extender to another?

None of the events appear to fire for the extender. I would like a person to select a date on the first calendar and have that date as the staring date for the second calender.

Thanksc

Hi sox21,

Use the client event of the textbox.

When the text changes, put the text in the other textbox.

Because the text is in the other textbox, that text (= which is a date) will be the Selected date for the 2nd calendar!

Is this what you are looking for?

... <script type="text/javascript"> function setDate(sender) { var mytxt = document.getElementById('TextBox5'); mytxt.value = sender.value; } </script></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <br /> <asp:TextBox ID="TextBox1" runat="server" onchange="setDate(this);"></asp:TextBox> <cc1:CalendarExtender ID="CalendarExtender1"runat="server" Enabled="True" TargetControlID="TextBox1"> </cc1:CalendarExtender> <br /> <asp:TextBox ID="TextBox5" runat="server" ></asp:TextBox> <cc1:CalendarExtender ID="CalendarExtender5"runat="server" Enabled="True" TargetControlID="TextBox5"> </cc1:CalendarExtender> </div>...

Kind regards,
Wim

I am able to get this code working on a blank page but it does not work when I add it to my page. My page uses a master page. When I enter the client script in debug, the sender is valued as expected but mytxt is set to null and throws a JS Error. Any ideas?

Thanks

try

document.getelementbyid("<%= TextBox5.ClientID >")

when the content and master merge to get rendered, the ID's of controls get renamed. Just look at the source through the browser to check this behavior!!!

EDIT:; also note that the text gets set but the selectedDate in the calendarExtender is not changed! --> Am I right about this? I think I noticed this behavior

Kind regards,
wim

That did the trick. Also, the selected date on the calendar does change. This is the exact behavior I was looking for.

Thanks!!!

How can I implement PopupControlExtender with Calendar in EditItemTemplate in GridView?

Hello,

I've to provide the user in my company with an editable gridview. When clicking on "edit" button there should be available a textbox with the ability to enter a date. This datevalue should come from a calendar.

I would like to have the calendar popuped at the bottom of the textbox.

I looked to the SampleWebsite of AtlasControlToolkit and had success to build a new aspx page with a textbox, a calendar and a PopupControlExtender.

For my question I also searched a lot in the internet and in this forum, but I didn't find the solution which works in my WebApplication.

I develop in VB with Visual Studio .NET 2005, SQL 2005 and have the newest Version of Atlas, AtlasControlTookit and AtlasControlExtender installed.

Could anybody help me?

Thanks a lot.

Paul
I'm not sure I understand your question, but generally you just put the Textbox and PopupControlExtender into the EditTemplate, and I think you can put the calendar control outside of the GridView and just reference it.
Hi, thanks for your advise.

Does this work equally well with a calender control in the footer? My code is as follows.

<asp:GridView ID="gvMisc" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="odsTrans" EmptyDataText="No data" ShowFooter="True" OnRowCommand="gvMisc_RowCommand" OnRowDataBound="gvMisc_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="From" SortExpression="dtFrom">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("dtFrom") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label33" runat="server" Text='<%# Bind("dtFrom", "{0:dd MMM yyyy}") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtFrom" runat="server" CausesValidation="True" ValidationGroup="Validation_Footer"></asp:TextBox>
<atlas:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<atlasToolkit:PopupControlExtender ID="PopupControlExtenderFromDate" runat="server">
<atlasToolkit:PopupControlProperties TargetControlID="txtFrom" PopupControlID="calFrom" Position="Right" />
</atlasToolkit:PopupControlExtender>
</ContentTemplate>
</atlas:UpdatePanel>
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Calendar ID="calFrom" runat="server" BackColor="White" BorderColor="#999999"
CellPadding="4" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"
ForeColor="Black" OnSelectionChanged="calFrom_SelectionChanged" Width="160px">
<SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
<TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
<SelectorStyle BackColor="#CCCCCC" />
<WeekendDayStyle BackColor="#FFFFCC" />
<OtherMonthDayStyle ForeColor="#808080" />
<NextPrevStyle VerticalAlign="Bottom" />
<DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
<TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
</asp:Calendar>

and on the server

protected void calFrom_SelectionChanged(object sender, EventArgs e)
{
PopupControlExtender pce = (PopupControlExtender)gvMisc.FooterRow.FindControl("PopupControlExtenderFromDate");
pce.Commit(calFrom.SelectedDate.ToString("dd MMM yyyy"));
}