Showing posts with label pops. Show all posts
Showing posts with label pops. Show all posts

Wednesday, March 28, 2012

Change default view of CalendarExtender

I need to change the default calendar view from Days to Years when it initially pops up. Does anybody know how to do this?

Hi Arjang,

me@.arjang.ca:

I need to change the default calendar view from Days to Years

Would you please give us more clear explanations?Do you want to list all the Days of a year on the page? If yes , I think you'd better use javascript + HTML to write your own calendar.As far as I know, the CalendarExtender is designed for showing the Days of a month. For more details, please visit: http://www.asp.net/AJAX/Control-Toolkit/Live/Calendar/Calendar.aspx or the Ajax ControlToolkit's source code.Thanks.

Best regards,

Jonathan


Hi Jonathan

I wanted to have the ability to change the default calendar view from Days to Years when it initially pops up. One real world scenario when this would be very important would be when using the calendar to select a birthdate. The year could be 1950 so it's not practical for someone to scroll back month by month, and users don't always understand they have to click the title twice to switch to year. Exposing a property like "InitialView" that could be set at design time or runtime would be ideal. The calendar would pop up right to year selection, then month, then day.

Anyway, I fixed it by changing the Ajax source code and it seems it is working properly.

Thanks,

Arjang



I would be very interested in doing this as well, what did you change?(in CalendarBehavior.js?)

Also, I would like to fire the date selected event when the user selects a month rather than a day.

Any help would be appreciated.


I did the following changes:

1. added another parameter for default mode:

this._defaultMode ="days";

this._mode =this._defaultMode;

2. expose a property to handle default mode:

get_defaultMode :function() {returnthis._defaultMode;},

set_defaultMode :function(value) {

if (this._defaultMode != value) {

this._defaultMode = value;

this._mode =this._defaultMode;this.raisePropertyChanged("defaultMode");

}

},

3. in hide function change "days" tothis._defaultMode

this._switchMode(this._defaultMode,true);

4. finally, in_switchMonth function add the following code in the else section of "if (this._animated && !dontAnimate)".

if (this._mode !="days")

{

var element =this._modes[this._mode];

$common.setLocation(element, {x:0,y:0});

$common.setVisible(element,true);

}

Hope it helps! please let me know if you face any problem.


Worked like a charm. Thanks so much.

Monday, March 26, 2012

Center div when using AnimationExtender

 I'm trying to center a div that pops up when I click on a button. It works fine and fades in/out but I need to center it on the screen. Can anyone point me in the right direction. Here is a snippet of my code. 
 <ajaxToolkit:AnimationExtender id="OpenHelp" runat="server" TargetControlID="btnHelp"> <Animations> <OnClick> <Sequence> <StyleAction Attribute="display" Value="" AnimationTarget="divScanHelp" /> <FadeIn AnimationTarget="divScanHelp" Duration=".3"/> </Sequence> </OnClick> </Animations> </ajaxToolkit:AnimationExtender> <ajaxToolkit:AnimationExtender id="CloseHelp" runat="server" TargetControlID="btnClose2"> <Animations> <OnClick> <Sequence> <FadeOut AnimationTarget="divScanHelp" Duration=".3"/> </Sequence> </OnClick> </Animations> </ajaxToolkit:AnimationExtender> <div id="divScanHelp" class="ScannerHelp" style="width: 330px; height: 224px; display: none;"> <table border="0" width="100%" cellpadding="2" cellspacing="1"> <tr><td align="right"><asp:ImageButton ID="btnClose2" runat="server" OnClientClick="return false;" CausesValidation="false" ImageUrl="./graphics/Icon_Close_Small.gif" ToolTip="Close" /></td></tr> <tr><td valign="middle" align="center" style="margin-top: 8px;"><img src="./graphics/scan-label.gif" border="0" width="300" height="194" style="border: 1px solid #c0c0c0;"></td></tr> </table> </div>

Add a Script animation to your OnClick sequence to invoke a javascript function that centers the div.

Use the _layout method of the ModalPopupBehavior class (ModalPopupBehavior.js in the toolkit) as a guide for developing your own center function. If you have relatively-positioned containers in your div's ancestry, look at my other post titled "For those having trouble with relatively-positioned ModalPopupExtenders."

Hope this helps.