Showing posts with label calendar. Show all posts
Showing posts with label calendar. Show all posts

Wednesday, March 28, 2012

Multiple PopupControlExtender - HOW?

Hi!

For example I have 10 textbox on my page. I created a panel with a calendar inside. I use 10 PopupControlExtender to bound the same panel to every textbox. (i dont want to create 10 diffrent Panels!)

And now i have a problem: How can i found out which PopupcontrolExtener and/or Textbox opend the calendar? I need this to set the value.

Any idea?

Thank you and sorry for bad english ;-)

Make it a user control. I've already done this and other than the issues that I've noted in some other posts about the popup behavior no longer working after postback, it works just fine. Below is the code I use to create the UserControl.

<%@. Control Language="C#" AutoEventWireup="true" CodeFile="DatePicker.ascx.cs" Inherits="User_Controls_DatePicker" %>
<asp:TextBox ID="tbDateSelected" runat="server" SkinID="DateTextBox"></asp:TextBox>
<asp:Panel ID="Panel1" runat="server" CssClass="popupControl">
<aspAjax: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">
<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>
<asp:ImageButton ID="imgCancel" runat="server" ImageUrl="../images/close.gif" OnClick="imgCancel_Click" />
</center>
</ContentTemplate>
</aspAjax:UpdatePanel>
</asp:Panel>
<ajaxToolkit:PopupControlExtender ID="pceDate" runat="server" PopupControlID="Panel1" TargetControlID="tbDateSelected" Position="Bottom" ></ajaxToolkit:PopupControlExtender>
<ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="Panel1" Radius="6" Opacity="1" TrackPosition="true" Width="5">
</ajaxToolkit:DropShadowExtender
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using AjaxControlToolkit;

public partial class User_Controls_DatePicker : System.Web.UI.UserControl
{
private string _selectedDate;

public string SelectedDate
{
get { return tbDateSelected.Text; }
set { tbDateSelected.Text = value; }
}

public string Position
{
set { pceDate.Position = ( PopupControlPopupPosition ) Enum.Parse( typeof( PopupControlPopupPosition ), value ); }
}

protected void Page_Load( object sender, EventArgs e )
{
}

protected void Calendar1_SelectionChanged( object sender, EventArgs e )
{
pceDate.Commit( Calendar1.SelectedDate.ToShortDateString( ) );
}
protected void imgCancel_Click( object sender, ImageClickEventArgs e )
{
pceDate.Cancel( );
}
}

Hope this helps.

Nick


You can find out which PopupControlExtender called the calendar with the info accessible by calling this following function, in the event handler for the control you popped up:

 
AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page)
You can use that in, say, your calendar's OnSelectedDateChanged event handler to see where it needs to go.

You can use the .Commit() function to submit the information from the calendar to the correct control. Once again, this would go in the event handler for your calendar's OnSelectedDateChanged event handler.

AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page).Commit(Calendar1.SelectedDate.toString())
 
Thanks toTed Glaza for the assist. 

Hello!

Thanks for your reply!

@.ncipollina
Thats not the right solution. I dont want to deliver 10 rendered controls (With the same content!) to the client. Thats to much overhead!

@.Matt M
Hi! That sounds interessting. But I dont get the point.

Protected Sub Calender_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
Dim currentPopupControlExtender as AjaxControlToolkit.PopupControlExtender = AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page)
currentPopupControlExtender.Commit(DirectCast(sender, Calendar).SelectedDate)
End Sub

Is this what you mean? I will try it tomorrow!


Undying:

Hello!

Thanks for your reply!

@.ncipollina
Thats not the right solution. I dont want to deliver 10 rendered controls (With the same content!) to the client. Thats to much overhead!

@.Matt M
Hi! That sounds interessting. But I dont get the point.

Protected Sub Calender_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
Dim currentPopupControlExtender as AjaxControlToolkit.PopupControlExtender = AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page)
currentPopupControlExtender.Commit(DirectCast(sender, Calendar).SelectedDate)
End Sub

Is this what you mean? I will try it tomorrow!

Use

AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page).TargetControlID
to find the TargetControlID of the PopupControlExtender that caused the panel to pop up. In other words, what textbox is the target of the PopupControlExtender.
 
Is that what you are looking for? 

Matt you are the man!

Protected

Sub Calender_SelectionChanged(ByVal senderAsObject,ByVal eAs System.EventArgs)

AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(

Me).Commit(DirectCast(sender, Calendar).SelectedDate)EndSub

This work like a charme! I could use the Same "DatePickerPanel" on my page many times without duplicate code. Just add a Extender to the textbox and I'm done! Fine!

Thanks again for sharing this!


I am not sure that this actually works. I mean, the commit on the proxy works, but if I try to retrieve the value of TargetControlID from AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page).TargetControlID, it is null (which sense since what is returned from the getproxy method is an empty popupcontrolextender)

Is there any way to retrieve this information? I am trying to set the value of two textboxes, each based on the other and another arbittrary value...

i.e. - i would like my code to be soomething like:

AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page).Commit(calendar1.selecteddate.tostring())

select case AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page).TargetControlID

case "text1"

text2.text=format(calendar1.selecteddate.addmonths(arbitrary value),"MM/dd/yyyy")

case "text2"

text1.text=format(calendar1.selecteddate.addmonths(-1*arbitrary value),"MM/dd/yyyy")

end select


Could you pleaseopen a work item to report and track this issue. Thank you!

Multiple Popups using popcontrol extender

In the previous version of the ajax control toolkit I could reference multiply popups with one control. Ie on the page I have one calendar and 10 different textboxs which call popup the same calendar control. This would then run the selection changed code for the calendar and commit the date to which ever control had opened the popup. ie

ProtectedSub Date_Selector_SelectionChanged(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles Date_Selector.SelectionChanged

Date_Popup.Commit(Date_Selector.SelectedDate.ToShortDateString)

EndSub

However with the new version of the toolkit you have to have a different popup for each textbox. So when it goes into the date selector section how do I chosse the right popup to send the data back to.

I think the test case in ToolkitTests\Manual\Repeater.aspx shows how to do this the new way.

I had asimilar problemTed Glaza helped me solve. I have two textboxes with a popupcontrolextender attached to each, both of which call a single calendar, cal1. Some code snippits:

Code behind:

Protected Sub Cal1_SelectionChanged(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles Cal1.SelectionChangedDim tmppceAs AjaxControlToolkit.PopupControlExtender tmppce = AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page) tmppce.Commit(Cal1.SelectedDate)End Sub

Declaration on the top of the .aspx page:

<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="act" %>
 
Everything works as expected. One thing to note, I'm running a self-compiled version of the toolkit - 9854. 

Monday, March 26, 2012

my Calendar extender is so slow

I have a textbox, linked to calendar extender, and validationcallout attached to it. But the calendar extender displays so slowly, it takes for ever to see the calendar.

Any solution please.

One more question pls, does the calendar extender pop up after a round trip to the server, or is it purely on the client?

Help, Help Help :) :). Thnks a lot.

tutus:

One more question pls, does the calendar extender pop up after a round trip to the server, or is it purely on the client?

The calendar extender is all done on client side using javascript.

I also get slow performance on the calendar extender when I have a few on the page and if I try to open and close them repeatedly while selecting dates.


is there any other alternative pls? or is the calendar server control faster?

Thanks.


tutus:

or is the calendar server control faster?

The calendar asp.net control will cause a full page postback.

I can see that the calendar extender is a tad slow but not to the extent where it is frustrating users or where it is such a delay that I would rather do a full page post back

My Calendar Extender does not display in my Formview

I have two calendar extenders corresponding to a texbox each. They are all inside a Formview. When the textboxes are clicked nothing displays.

I have tried the calendar extender outside the Formview and everything seems to work fine.

I have tried the script manager in and outside the formview to no avail. Is the script manager supposed to be inside the Formview as well ? Any particular place where those controls are supposed to be to function properly??

When I first started to apply the extenders I inserted the script manager control after the extender, I wonder if that may have screwed up things. Althought, I have redone it to no avail. Anyideas ?

I've tried this code and works fine:
 <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:FormView ID="FormView1" runat="server" DefaultMode="Insert"> <InsertItemTemplate> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1"> </ajaxToolkit:CalendarExtender> </InsertItemTemplate> </asp:FormView>

You should post your code here to resolve your problem.

My Calendar doesnt like Saturdays... :((

This is the code for one of the two calendars I have on my page:

<cc1:calendarextenderid="calex_txtStartDate"runat="server"TargetControlID="txtStartDate"PopupButtonID="calendarIconStartDate"></cc1:calendarextender>

My problem is that neither of these calendars wants to display Saturdays. :( I searched through the other posts, but they all mention UpdatePanels, none of which I have. The only containers I have this in are an asp:Content and a standard HTML <div>.

Thanks!

FYI: It is a cell padding issue, easily fixed (as it turns out) with CSS.

My Calendar (AJAX asp.net) get NUTS? Only shows 5 days, instead of 7 days

Hi,

the problem is that my calendar shows only 5 days instead of 7 days. Any IDEAS? There is no (code-behind) code in CS file that does hide weekend.

here is a code

<asp:TextBox runat="server" ID="TBsearchFrom" Columns="10" />
<asp:TextBox runat="server" ID="TBsearchTo" Columns="10" />
<ajaxToolkit:CalendarExtender ID="cldFrom" runat="server"
TargetControlID="TBsearchFrom"
CssClass="MyCalendar"
Format="MM/dd/yy"
OnClientDateSelectionChanged = "function(e){calendar_hide(e);}"
FirstDayOfWeek="Monday"

/>
<ajaxToolkit:CalendarExtender ID="cldTo" runat="server"
TargetControlID="TBsearchTo"
CssClass="MyCalendar"
Format="MM/dd/yy"
OnClientDateSelectionChanged = "function(e){calendar_hide(e);}"
FirstDayOfWeek="Monday"
/>
<br/>


I had this same issue. The problem was that the calendar was picking up on CSS set for my site, which didn't have the right padding for each of the calendar's components. What I did was copy the calendar's padding properties in the CSS from the example in the toolkit and paste it into my CSS file, and customized the colors from there.

Hi there,

I am having the same kind of problem, my calendar control is contained within a detailsview. I have added the css to look like this

.MyCalendar.ajax__calendar_container {

border:1pxsolid#646464;

background-color:#ffffff;

color:#000000;

}

.MyCalendar

.ajax__calendar_footer {border-top:1pxsolid#f5f5f5;

}

.MyCalendar

.ajax__calendar_dayname {border-bottom:1pxsolid#f5f5f5;

}

.MyCalendar

.ajax__calendar_day {border:1pxsolid#ffffff;

}

.MyCalendar

.ajax__calendar_month {border:1pxsolid#ffffff;

}

.MyCalendar

.ajax__calendar_year {border:1pxsolid#ffffff;

}

.MyCalendar

.ajax__calendar_active.ajax__calendar_day {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;

}

.MyCalendar

.ajax__calendar_active.ajax__calendar_month {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;

}

.MyCalendar

.ajax__calendar_active.ajax__calendar_year {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;

}

.MyCalendar

.ajax__calendar_other.ajax__calendar_day {background-color:#ffffff;border-color:#ffffff;color:#646464;

}

.MyCalendar

.ajax__calendar_other.ajax__calendar_year {background-color:#ffffff;border-color:#ffffff;color:#646464;

}

.MyCalendar

.ajax__calendar_hover.ajax__calendar_day {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;

}

.MyCalendar

.ajax__calendar_hover.ajax__calendar_month {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;

}

.MyCalendar

.ajax__calendar_hover.ajax__calendar_year {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;

}

.MyCalendar

.ajax__calendar_hover.ajax__calendar_title {color:#0066cc;

}

.MyCalendar

.ajax__calendar_hover.ajax__calendar_today {color:#0066cc;

}

But whenever I open the calender I am only presented with 8 days of the month (the 1st 4 and last 4) I think its a padding issue but I dont know what else to change


Never mind my last post.

But if anyone is having the same problem all you need to do is add some extra css for the body of the calendar.

In my case I had mine within a td

.MyCalendar

td

{

padding:0px,0px,0px,0px;border-spacing:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;

}

Wednesday, March 21, 2012

Need help with CalendarExtender Control

Hi,

I'm a beginner to ASP.NET AJAX and ASP.NET itself. I have a calendar extender for a textbox and it works fine until I click the 'Submit' button in my form. Apparently in the UI the date will show but when I do an insert to my database by using the Convert.ToDateTime function first, I get thrown an exception where it says:

'The string was not recognized as a valid DateTime. Tehre is a unknown word starting at index 0'

I would like to get some help to troubleshoot this problem.

Thanks in advance,
Nick

HI, probably your date format is not correct, the calendar extender format should be the same that the database format check that both formats be mm/dd/yy or mm/dd/yyyy or mm/dd/yyyy hh:mm:ss.


Hi, apparently something was wrong with the AJAX calendar extender. I didn't realise it until I deleted it and created a new one.

Thanks for the help anyway!Smile

Cheers,
Nick