[Solved] Tooltip will not appear on initial page load, will appear after AJAX postback.

[Ron]

I am currently trying to follow the RadCalendar and RadTooltipManager demo for my project but an experiencing some strange behavior.

When I come to the page for the first time the day cells will not show their tooltips, however when I click a day which causes an AJAX postback I have setup with rad ajax manager, the tooltips will start showing normally.

I have also tried using a RadAjaxPanel with RadTooltipManager, RadCalendar, and RadListView all inside, as well as an asp UpdatePanel with UpdateMode conditional with the other controls inside it as well, when using these methods the tooltips will not appear at all even after postbacks.

I think it might have to do with adding the controls to the TargetControls collection?

Also, I am doing this as a module for DotNetNuke if that information helps at all.

Relevant ASCX Code:

<telerik:RadAjaxLoadingPanel ID="LoadingPanel" runat="server" Skin="Metro"></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxManager ID="AjaxManager" runat="server" EnablePageHeadUpdate="false" EnableAJAX="true">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="rcPassCalendar">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="rlvDayClassesInfo" LoadingPanelID="LoadingPanel" />
                <telerik:AjaxUpdatedControl ControlID="rcPassCalendar" LoadingPanelID="LoadingPanel" />
                <telerik:AjaxUpdatedControl ControlID="TooltipManager" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

<telerik:RadToolTipManager ID="TooltipManager" runat="server" OnAjaxUpdate="TooltipManager_AjaxUpdate" Position="MiddleRight" Width="300" Height="300" RelativeTo="Element"
    Animation="Fade" AnimationDuration="250" ShowDelay="0" Skin="Glow">
</telerik:RadToolTipManager>

<telerik:RadCalendar ID="rcPassCalendar" runat="server" AutoPostBack="True" ShowRowHeaders="False" ShowOtherMonthsDays="False" Width="100%"
    OnSelectionChanged="rcPassCalendar_SelectionChanged" OnDayRender="rcPassCalendar_DayRender" EnableMultiSelect="false" EnableMonthYearFastNavigation="true" CellVAlign="Top" DefaultCellPadding="0"
    ShowDayCellToolTips="false">
    <FooterTemplate>
        <asp:Panel ID="pnlCalendarInstruction" runat="server" CssClass="dnnFormMessage dnnFormWarning" style="margin-bottom:0px;">
            Please select a day in the calendar above to see the sessions occurring on that day below.
        </asp:Panel>
    </FooterTemplate>
    <CalendarDayTemplates>
        <telerik:DayTemplate ID="Class" runat="server">
            <Content>
                <asp:Panel ID="pnlDaySessions" runat="server" CssClass="classDay">

                </asp:Panel>
            </Content>
        </telerik:DayTemplate>
    </CalendarDayTemplates>
</telerik:RadCalendar>

Relevant C# Codebehind:

protected void rcPassCalendar_DayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)
        {
            DateTime calendarDate = e.Day.Date;
            var daySessionQuery = from session in MonthsSessions
                                  where session.StartDt.Date == calendarDate.Date
                                  select session;

            //Need to ad an ID to the calendar cells, they don't have one by default.
            string uniqueDayNumber = e.Day.Date.Day.ToString() + e.Day.Date.Month.ToString() + e.Day.Date.Year.ToString();


            e.Cell.Attributes.Add("id", "Calendar_" + uniqueDayNumber);
            TooltipManager.TargetControls.Add(e.Cell.Attributes["id"], e.Day.Date.Day.ToString(), true);

            if (daySessionQuery != null && daySessionQuery.Count() > 0)
            {
                //e.Cell.Controls.Add(BuildEventDayControls(daySessionQuery, e.Day.Date.Day.ToString()));

                if (calendarDate.Month == rcPassCalendar.FocusedDate.Month)
                {
                    rcPassCalendar.SpecialDays.Add(e.Day);
                }

            }
        }

[Danail Vasilev]

Hi Ron,

I have already replied to the support ticket that was opened by you on this regard and I paste my answer below, so that the rest of the forum members can benefit of it:

Please refer to this online demo to see an example on how to integrate tooltip with calendar control. You may also find useful the following resources:
 - Using RadToolTipManager in MS AJAX UpdatePanels
 - Common Issues


Regards,
Danail Vasilev
Telerik