DNN+AJAX - Using CalendarExtender
This time, I want to know that is there something I have to do when using ASP .NET AJAX Control Toolkit in DotNetNuke module. So I decide to do some exploration on how to use it in DotNetNuke module. Based on DNN forums, there are some controls that doesn't work with DNN module. I think, all control should work because it just like ASP .NET control. But maybe we have to do something trick (or maybe hack) in order to make all Ajax Control Toolkit work in DNN module.
Now, I'm gonna test CalendarExtender control.
As usual, create your new DNN module (or just open the last one). Add new web user control and name it AjaxCalendar.ascx (or whatever name you like). My complete AjaxCalendar.ascx is below :
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AjaxCalendar.ascx.cs"
Inherits="DNNAjaxControlToolkitUsageModule.AjaxCalendar" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<style type="text/css">
.MyCalendar .ajax__calendar_container {
border:1px solid #646464;
background-color: lemonchiffon;
color: red;
}
.MyCalendar .ajax__calendar_other .ajax__calendar_day,
.MyCalendar .ajax__calendar_other .ajax__calendar_year {
color: black;
}
.MyCalendar .ajax__calendar_hover .ajax__calendar_day,
.MyCalendar .ajax__calendar_hover .ajax__calendar_month,
.MyCalendar .ajax__calendar_hover .ajax__calendar_year {
color: black;
}
.MyCalendar .ajax__calendar_active .ajax__calendar_day,
.MyCalendar .ajax__calendar_active .ajax__calendar_month,
.MyCalendar .ajax__calendar_active .ajax__calendar_year {
color: black;
font-weight:bold;
}
</style>
<asp:Panel ID="pnlDummy" runat="server" Style='position: relative;'>
<asp:TextBox runat="server" ID="Date1" autocomplete="off" /><br />
<ajaxToolkit:CalendarExtender ID="defaultCalendarExtender" runat="server" TargetControlID="Date1" />
<div style='font-size: 90%'>
<em>(Set the focus to the textbox to show the calendar)</em></div>
<br />
<br />
<b>Calendar with a custom style and formatted date:</b><br />
<asp:TextBox runat="server" ID="Date2" autocomplete="off" /><br />
<ajaxToolkit:CalendarExtender ID="customCalendarExtender" runat="server" TargetControlID="Date2"
CssClass="MyCalendar" Format="MMMM d, yyyy" />
<div style='font-size: 90%'>
<em>(Set the focus to the textbox to show the calendar)</em></div>
<br />
<br />
</asp:Panel>
Notes that nothing special in that code. I add reference to AjaxControlToolkit assembly. Add one Panel. Inside it, add two textbox controls and two CalendarExtender controls. The stylesheet code is copied from stylesheet.css from SampleWebsite in AjaxControlToolkit-NoSource.zip.
The result is like this :
Based on my experience, if AjaxControlToolkit using relative or position calculation based on offset position, then you have to wrap those control inside a panel (or you can use <div> tag). So, I wrap two textbox and two CalendarExtender controls with one Panel control. That's the trick. If you don't do that. The position of the calendar will float and not in the right position. But some control should use a little more trick. I will explain what kind of Ajax Control Toolkit that should do more hack on it.
Hope this help.