This is a migrated thread and some comments may be shown as answers.

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

1 Answer 18 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 1
Ron asked on 23 Jul 2014, 05:58 PM
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);
                }
                     
            }
        }

1 Answer, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 25 Jul 2014, 01:55 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
ToolTip
Asked by
Ron
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Share this question
or