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:
--
Confused of Grantham
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:
- 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.
- 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?
<%@ 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