Special Days Tooltip

9 posts, 0 answers
  1. Angie
    Angie avatar
    101 posts
    Member since:
    Jan 2008

    Posted 16 Sep 2011 Link to this post

    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
  2. Mira
    Admin
    Mira avatar
    1124 posts

    Posted 22 Sep 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Angie
    Angie avatar
    101 posts
    Member since:
    Jan 2008

    Posted 26 Sep 2011 Link to this post

    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!


  5. Mira
    Admin
    Mira avatar
    1124 posts

    Posted 27 Sep 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  6. Angie
    Angie avatar
    101 posts
    Member since:
    Jan 2008

    Posted 28 Sep 2011 Link to this post

    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!
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 29 Sep 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  8. Angie
    Angie avatar
    101 posts
    Member since:
    Jan 2008

    Posted 10 Nov 2011 Link to this post

    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!!


  9. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 14 Nov 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  10. Angie
    Angie avatar
    101 posts
    Member since:
    Jan 2008

    Posted 14 Nov 2011 Link to this post

    Yay!  I'm glad that was such a simple fix.  Thanks so much for your help, it's working now!  :-)
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017