Tooltip in RadScheduler

[Stuart Hemming]

I've employed a technique similar to the one shown in this demo to create rich tooltips for my scheduler app.

My tooltip control has a toolbar in it. The toolbar has a OnClientButtonClicking event wired up. The tooltip also contains a RadScriptBlock with a correctly configured function to be called by the toolbar's OnClientButtonClicking event.

However, when my app runs and I hover over an event an error is generated along the lines of "ToolTipCommandItemClicking" is not defined.

Imagine my surprise.

After much messing about, I discovered that the only time the 'missing' JS function is found is if I move the definition out of the control used to create the tooltip and put it on the page containing the scheduler.

Whilst very odd, that wouldn't be the end of the world except for the fact that I can't call any other functions for detailing with the relevant toolbar button clicks which depend on the data loaded in to the tooltip control.

So, questions:

1. Why won't the browser acknowledge that the called function does exist unless it is on the main page and not in the control used to populate the tooltip.
2. How do I make it possible for the code that I have currently in the tooltip control to execute against the data loaded in the tooltip control itself?

For completeness, the markup for the control is show below.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CalendarEventToolTip.ascx.cs" Inherits="CalendarEventToolTip" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
    <script type="text/javascript">
      function ToolTipCommandItemClicking(sender, e) {
          var btn = e.get_item();
          var cmdName = btn.get_commandName();

          e.set_cancel(true);
          switch (cmdName) {
              case "Export":
                  Export();
                  break;

              case "Print":
                  break;

              case "Mail":
                  break;

              case "RequestInvite":
                  break;
          }
      }

        function Export() {
            var AjaxRequestObject = GetAjaxRequestObject("Export", "<%=this.GetType().ToString()%>");
            AjaxRequestJson(AjaxRequestObject);
        }
    </script>
</telerik:RadScriptBlock>
<telerik:RadToolBar ID='RadToolBar1'
                    runat='server'
                    OnClientButtonClicking='ToolTipCommandItemClicking'
                    Width='100%'>
  <Items>
    <telerik:RadToolBarButton CommandName="Export"
                              ImageUrl="ExportToOutlook"
                              ToolTip="Export this event to Outlook"/>
    <telerik:RadToolBarButton CommandName="Print"
                              ImageUrl="Print"
                              ToolTip="Print event details"/>
    <telerik:RadToolBarButton CommandName="Mail"
                              ImageUrl="Mail"
                              ToolTip="Send an email message to event organiser"/>
    <telerik:RadToolBarButton CommandName="RequestInvite"
                              ImageUrl="RequestInvite"
                              ToolTip="Request an invitation"/>
  </Items>
</telerik:RadToolBar>
<div style="margin:5px 5px 0px 5px; font-size:12px; padding-bottom: 10px;">
  <div style="border-bottom:solid 1px #ccc;margin-bottom:9px;font-size:11px;">
    Starting on: <asp:Label runat="server"
                            ID="StartingOn"></asp:Label>
  </div>
  <asp:Literal runat="server"
               ID="Subject"></asp:Literal>
  <asp:Literal runat="server"
               ID="Description"></asp:Literal>
</div>

-- 
Confused of Grantham

[Stuart Hemming]

Anyone prepared to hazard a guess?

-- 
Confused and Desperate of Grantham

[Svetlina Anati]

Hello Stuart,

When you are using AJAX, the scripts do not get correctly parsed because of the fact that the update panel uses the innerHTML property and you should dynamically evaluate the scripts if you want them to be recognized as such. This is related to the way the MS AJAX Framework works and it is not directly related to the RadControls and RadToolTipManager. However, since the manager loads its content through AJAX in your scenario, you experience this general issue.

For such cases, we have prepared a blog post which explains this problem and also offers a sample solution. The blog post has also attached a demo which reproduces the problem without usage of any RadControls and also has the suggested workaround implemented. I believe that this post will be helpful - you can find it below:

http://blogs.telerik.com/tervelpeykov/posts/08-10-20/ajax_using_ajax_to_load_a_usercontrol_that_has_javascript_declared_in_it.aspx

The solution in the blogpost is pretty complex and it does not work in some particular cases. Another solution is to register your scripts from the user control's code-behind as explained below:

http://blogs.telerik.com/blogs/posts/09-05-05/executing_javascript_function_from_server-side_code.aspx

This being said what I recommend is to declare script blocks from the server when needed - this approach is easier and will work in all scenarios.

Please, examine the provided resources, find the better solution for your case and let us know how it goes.
 

Best wishes,
Svetlina
the Telerik team

[Stuart Hemming]

Svetlina,

Thanks for the light breakfast reading!

I will, as always, be guided by you.

-- 
Stuart

[Stuart Hemming]

Svetlina,

Just to be clear, when you say...

This being said what I recommend is to declare script blocks from the server when needed - this approach is easier and will work in all scenarios

Am I right in thinking you mean that I should inject all of the source in my <script> tags (ie the functions ToolTipCommandItemClicking and Export in my original example)?

-- 
Curious of Grantham

[Svetlina Anati]

Hi Stuart,

 Yes, this is exactly what I meant - register client script block from the code-behind. This will work because when you register the script in this manner, it is put in the head section and thus it can be parsed.

Regards,
Svetlina
the Telerik team