Special Days Tooltip

[Angie]

Hello.  I am trying to set up the RadCalendar to have custom mouseover tooltips on certain special days.  I have seen the example at http://demos.telerik.com/aspnet-ajax/tooltip/examples/tooltipcalendar/defaultcs.aspx, but I would like to set up everything on PageLoad, rather than having the tooltips on demand.  I am unclear as to how all the various elements would fit together. 

Currently I am setting the special days as follows:

foreach (DataRow dr in dtEvents.Rows)
           {
               RadCalendarDay NewDay = new RadCalendarDay(RadEvents);
               NewDay.Date = DateTime.Parse(dr["date"].ToString());

               NewDay.IsSelectable = true;
               NewDay.ItemStyle.CssClass = "specialDay";
               NewDay.ToolTip = dr["title"].ToString();
               RadEvents.SpecialDays.Add(NewDay);

           }

Thanks in advance!

-Angie

[Mira]

Hello Angie,

In order to implement the desired functionality, I recommend that you add the special days on Page_Load and add the cells to the target controls of the RadTooltipManager on DayRender of the calendar.
Please examine the following resources for additional information:
DayRender
RadCalendar Day Templates

I hope this helps.

Best wishes,
Mira
the Telerik team

[Angie]

Hi Mira.  Thanks for the response.

Is there a way to have the data for the Tooltip already set when the page is loaded, rather than having it load on demand?  I would prefer not to have to do a postback to load the Tooltip control.  The examples for the tooltip manager include an ajax postback to load a user control into the tooltip manager.    I want to just pass a formatted html string or something and have the tooltip display that.

protected void RadCalendar1_DayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)
    {

        DateTime CalendarDate = e.Day.Date;

        if (e.Day.Date.ToShortDateString() == ((DateTime)dtEvents.Rows[3]["date"]).ToShortDateString())
        {
            TableCell cell = e.Cell;
            cell.Attributes.Add("id", "Calendar1_" + dtEvents.Rows[3]["webcast_id"]);
            RadToolTipManager1.TargetControls.Add(e.Cell.Attributes["id"], dtEvents.Rows[3]["webcast_id"].ToString(), true);

            //can i setup the tooltip here for display??

        }
    }

Any suggestions?

Thanks!

[Mira]

Hello Angie,

In order to have the tooltip loaded on page load, you can set the VisibleOnPageLoad property to true. You can also set the AutoCloseDelay and HideEvent to the desired values.
However, I suggest that you consider using the RadNotification control for such scenarios.
Please examine the following demos for additional information:
Bind to Target
Web Service and Show
Notification Show

I hope this helps.

Kind regards,
Mira
the Telerik team

[Angie]

Hi Mira.  I think you misunderstood what I am saying.  I don't need the tooltip to be visible when the page is loaded.  My problem is that the examples all show the page doing a postback when hovering over the tooltip target control.  Since I already have the information with which to populate the tooltip control, I want to populate the tooltip on page load, and then have it display without a postback when the user hovers over the target control.

I hope that is clearer.  Thanks!

[Marin Bratanov]

Hi Angie,

The RadControls for ASP.NET AJAX do not offer this preloading functionality. The purpose of the AJAX is to allow you to perform smaller requests to the server when needed so that the initial page load is quicker. These requests you see are not full postbacks and are returned much quicker from the server, as their size is much smaller.

What I can advise is that you remove the OnAjaxUpdate event and use the RadToolTipManager's client-side API to set its value as its text in the OnClientShow event:

function OnClientShow(sender, args)
{
    sender.set_text(sender.get_value());
}

and pass the required html as the value when you add the target controls, for example:

RadToolTipManager1.TargetControls.Add(e.Cell.Attributes["id"], "<span style=\"color:red;\">" + ID.ToString() + "</span>", true);

This code is can easily be incorporated in this online demo (which you can run locally to see the effect from the LiveDemos folder in your RadControls installation).

You may also examine this thread as it discusses a similar issue: http://www.telerik.com/community/forums/aspnet-ajax/tooltip/tooltip-calendar-issue.aspx#1757870.

A third alternative I can offer is setting the tooltips for the cells of the calendar and using the RadToolTipManager's Autotooltipify property to turn them into RadToolTips instead of regular browser tooltips.

Which approach you can take depends on the content you wish to place in the tooltip (these scenarios are not possible in all cases) and when you have it available. Please also note that the ajax request from the calendar that loads the next month cannot be avoided.

Kind regards,
Marin
the Telerik team

[Angie]

Ok, Marin, I've got the ajax set up then to load the tooltip.

The problem I'm having now is that when I change months, the special days are highlighted, but the tooltip is not applied.  I've got the calendar set to autopostback, and the DayRender event is setting the tooltip target properly, but the calendar is not displaying the template.  I think maybe I don't have the ajax set up properly.  When I try switching to a RadAjaxManager instead of the RadAjaxPanel, the arrows to switch months stop working, so I'm not sure what's up with that.

Here is my code:

<telerik:RadAjaxPanel runat="server">

             <telerik:RadCalendar ID="RadEvents" runat="server" TitleFormat="MMMM yyyy" ShowRowHeaders="false" Width="200px" OnDayRender="RadEvents_DayRender" AutoPostBack="true"  UseColumnHeadersAsSelectors="false" UseRowHeadersAsSelectors="false" EnableMultiSelect="false"   >
                <SpecialDays>
                        <telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-CssClass="rcToday" />
                    </SpecialDays>
            </telerik:RadCalendar>
            </telerik:RadAjaxPanel>
             <telerik:RadToolTipManager Width="250px"  Height  RelativeTo="Element" ID="RadToolTipManager1"  ManualClose=true
                    runat="server" OffsetX="15" Position="MiddleRight" OnAjaxUpdate="RadToolTipManager1_AjaxUpdate"
                    Skin="Telerik" EnableShadow="true">
                </telerik:RadToolTipManager>

And the code behind:

protected void Page_Load(object sender, EventArgs e)
   {

           foreach (DataRow dr in dtEventsCalendar.Rows)
           {
               RadCalendarDay NewDay = new RadCalendarDay(RadEvents);
               NewDay.Date = DateTime.Parse(dr["date"].ToString());

               NewDay.IsSelectable = true;
               NewDay.ItemStyle.CssClass = "specialDay";

               NewDay.ItemStyle.BackColor = System.Drawing.Color.Aqua;
               NewDay.ItemStyle.BorderColor = System.Drawing.Color.Blue;

               RadEvents.SpecialDays.Add(NewDay);
           }
         }


   protected void RadEvents_DayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)
   {

       bool isSpecial = false;
       foreach (RadCalendarDay d in RadEvents.SpecialDays)
       {
           if (d.Date == e.Day.Date)
               isSpecial = true;
       }

       if (isSpecial)
       {
           TableCell cell = e.Cell;
           string d = e.Day.Date.ToString();
           cell.CssClass = "Appointment";
           cell.Attributes.Add("id", "Calendar1_" + d);
           RadToolTipManager1.TargetControls.Add(e.Cell.Attributes["id"], d, true);
       }

   }

   protected void RadToolTipManager1_AjaxUpdate(object sender, ToolTipUpdateEventArgs e)
   {
       EventToolTip details = (EventToolTip)this.LoadControl("../EventToolTip.ascx");
       details.eventDate = Convert.ToDateTime(e.Value);
       e.UpdatePanel.ContentTemplateContainer.Controls.Add(details);
   }

Thanks!!

[Marin Bratanov]

Hello Angie,

The RadCalendar performs an AJAX request when you change the month. You can easily check this in the net tab of your developer bar of choice. Please accept my apologies if I have not made this clear enough in my previous reply.

This means that in this request you also need to update the RadToolTipManager, i.e. include it in the AjaxPanel, so that it gets the new target controls:

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
    <telerik:RadCalendar ID="RadEvents" runat="server" TitleFormat="MMMM yyyy" ShowRowHeaders="false"
        Width="200px" OnDayRender="RadEvents_DayRender" AutoPostBack="true" UseColumnHeadersAsSelectors="false"
        UseRowHeadersAsSelectors="false" EnableMultiSelect="false">
        <SpecialDays>
            <telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-CssClass="rcToday" />
        </SpecialDays>
    </telerik:RadCalendar>

    <telerik:RadToolTipManager Width="250px" Height="200px" RelativeTo="Element" ID="RadToolTipManager1"
        ManualClose="true" runat="server" OffsetX="15" Position="MiddleRight" OnAjaxUpdate="RadToolTipManager1_AjaxUpdate"
        Skin="Telerik" EnableShadow="true">
    </telerik:RadToolTipManager>
</telerik:RadAjaxPanel>

Once I did this things seem to be working fine on my end: http://screencast.com/t/4QcLNq718z81. I am also attaching my test page as a reference. Please ntoe that I changed the special days as I do not have your datasource and I also set some Height to the ToolTipManager as in your markup this property has no value.


Kind regards,
Marin
the Telerik team

[Angie]

Yay!  I'm glad that was such a simple fix.  Thanks so much for your help, it's working now!  :-)