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

UserControl Tooltip

1 Answer 140 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Jeremy
Top achievements
Rank 1
Jeremy asked on 13 Nov 2012, 01:42 PM
Hello,

I have been trying to use the RadToolTipManager with a RadScheduler.
So far I have been able to make the ToolTip appear and show data.
However I have 2 problems:

1) When I put JavaScript inside the UserControl (.ascx), it seems like the javascript is not called (I get error "*FunctionName* is not defined").  I have to put the javascript inside the Page that calls the UserControl for it to work.

2) I have a RadListBox inside the UserControl, when I use $find('<%=lbAnnotations.ClientID%>') it returns null or $('lbAnnotations') returns length = 0.

I think I maybe missing something.  Here are the code blocks:

Inside calling page:
<telerik:RadToolTipManager runat="server" AnimationDuration="300" ShowDelay="200"
        HideDelay="1" ID="RadToolTipManager1" Width="480px" Height="227px" RelativeTo="Element"
        Animation="None" Position="BottomCenter" OnAjaxUpdate="RadToolTipManager1_AjaxUpdate" Skin="Telerik"
        ShowEvent="OnClick" HideEvent="ManualClose" Modal="true">
</telerik:RadToolTipManager>

Adding controls to ToolTipManager:
Private Sub scListeDoses_AppointmentCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.AppointmentCreatedEventArgs) Handles scListeDoses.AppointmentCreated
        If e.Appointment.Visible Then
            Dim ctrlId As String = e.Container.FindControl("btnNotification").ClientID()
            Dim aptId As String = e.Appointment.ID.ToString()
 
            RadToolTipManager1.TargetControls.Add(ctrlId, aptId, True)
        End If
    End Sub

TooltipManager AjaxUpdate:
 
Protected Sub RadToolTipManager1_AjaxUpdate(ByVal sender As Object, ByVal e As ToolTipUpdateEventArgs)
    Dim aptId As Integer
    Dim apt As Appointment
    If Not Integer.TryParse(e.Value, aptId) Then
        'The appoitnment is occurrence and FindByID expects a string
        apt = scListeDoses.Appointments.FindByID(e.Value)
    Else
        'The appointment is not occurrence and FindByID expects an int
        apt = scListeDoses.Appointments.FindByID(aptId)
    End If
 
    Dim ctrl As Control = Page.LoadControl("FADMToolTip.ascx")
    e.UpdatePanel.ContentTemplateContainer.Controls.Add(ctrl)
    Dim details As FADMToolTip = DirectCast(ctrl, FADMToolTip)
    details.OrdoNoAuto = apt.Attributes("NoAutoOrdo")
    details.PresNoAuto = apt.Attributes("NoAutoPres")
    details.PatiNoAuto = apt.Attributes("PatiNoauto")
    details.PatiNumero = apt.Attributes("NumeroDossier")
    details.PatiNom = apt.Attributes("NomPatient")
    details.PatiPrenom = apt.Attributes("PrenomPatient")
    details.Medicament = apt.Attributes("NomMedicament")
    details.NumeroOrdo = apt.Attributes("Numero")
End Sub

UserControl for ToolTip:
<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="FADMToolTip.ascx.vb" Inherits="GESPHARxLite_2.FADMToolTip" %>
<%@ Import Namespace="GESPHARxLite_2.GestionMessages" %>
<%@ Import Namespace="GESPHARxLite_2.GesPharxWeb" %>
<%--Note: si on doit faire des scripts on doit les ajouter dans FADMElectronique.aspx, car le contrôle ASCX est dedans la FADM qui a déjà un RadScriptManager--%>
<style type="text/css">
    body, html, form  
    {
        height: 100%;
    }      
    .annotBouton
    {
        float: right;
        bottom: 2px;
        right: 2px;
        width: 35px;
    }
    .lblInfos
    {
        font-weight: bold;
        color: #707070;
    }
    .infoAnnot
    {
        float: left;
        width: 375px;
    }
    .listeAnnot
    {
        background-color: #d7f3ff;
        display: inline-block;
    }
    .listeAnnotInactif
    {
        background-color: #EBEBEC;
        display: inline-block;
    }
    .editBouton
    {
        padding: 5px;
        float: right;
        width: 35px;
    }
</style>
<link href="css/GESPHARxLite.css" rel="stylesheet" type="text/css" />
<div style="float:left; width: 100%;">
    <div class="annotBouton" style="float:right;" onclick="AjoutAnnot()">
        <img class="adminButton" src="Images/Icons/061-Plus-Icon.png" alt="Add" height="32"" />
    </div>
    <div style="float:left">
        <span class="lblInfos">
            <%=GetMessageEx(6795).Texte%></span>
        <br />
        <span>
            <asp:Label ID="lblInfoPatient" runat="server">
            </asp:Label>
        </span>
    </div>
</div>
<hr />
<div id="divListAnnot" style="float:left">
    <telerik:RadListBox ID="lbAnnotations" PersistClientChanges="true"
        runat="server" Visible="true" Height="170px" Width="450px"
        DataValueField="annot_noauto" >
        <ItemTemplate>
                <div id="divListe" class="listeAnnot" runat="server">
                    <div id="btnModifier" class="editBouton" onclick="ModifAnnot();" runat="server">
                        <img class="adminButton" src="Images/Icons/Edit32.png" alt="Edit" height="32"/>
                    </div>
                    <div class="infoAnnot">
                        <div>
                            <telerik:RadCodeBlock ID="RadCodeBlock9" runat="server">
                                <span class="FADMTextGras">
                                    <%=GetMessageEx(6054).Texte%>
                                </span>
                                <span class="FADMTextGras">
                                    <%#FormatPHDate(Eval("ANNOT_DATE_DEBUT"))%></span>
                                <span class="FADMTextGras">
                                    <%#FormatPHDate(Eval("ANNOT_HEURE_DEBUT"))%></span>
                                  
                                                                      
                                <span class="FADMTextGras">
                                    <%#IIf(GetNonDBNull(Eval("ANNOT_DATE_FIN")) = "", "", GetMessageEx(6055).Texte)%>                        
                                </span>
                                <span class="FADMTextGras">
                                    <%#IIf(GetNonDBNull(Eval("ANNOT_DATE_FIN")) = "", "", FormatPHDate(GetNonDBNull(Eval("ANNOT_DATE_FIN"))))%>
                                </span>
                                <span class="FADMTextGras">
                                    <%#Eval("ANNOT_HEURE_FIN")%> 
                                </span>
                                <span style="font-size: 11px;">
                                    <br /><%#Eval("ANNOT_DESCRIPTION")%>
                                </span>
                                <span class="FADMTextGras" style="<%#IIf(Eval("PANN_BLOQUER_ADM") = "1", "", "display:none")%>">
                                    <br />  
                                    <%#GetMessageEx(6800).Texte%>                                    
                                </span>
                            </telerik:RadCodeBlock>
                        </div>
                         
                    </div>
                </div>
        </ItemTemplate>
    </telerik:RadListBox>
</div>
 
<div id="divAjoutAnnot" style="float:left; display: none;">
    <div class="editBouton" onclick="CancelAnnot();">
        <img class="adminButton" src="Images/Icons/Cancel32.png" alt="Cancel" height="32"/>
    </div>   
</div>
 
<div id="divModifAnnot" style="float:left; display: none;">
    <div style="padding: 10px;clear:both;">
        <div id="divCode" style="margin-bottom: 10px">
            <div style="float: left;">
                <asp:Label ID="lblCode" class="FADMTextGras" runat="server">Code: </asp:Label>
            </div>           
            <div style="float: left;">
                  
                   
                <telerik:RadNumericTextBox ID="edCodeAnnot" runat="server" Width="60" MaxLength="20"
                    NumberFormat-DecimalDigits="0">
                </telerik:RadNumericTextBox>
            </div>
            <div class="spacer">
            </div>
        </div>
        <div>
            <asp:Label ID="lblDesc" class="FADMTextGras" runat="server">Description: </asp:Label>
        </div>
        <div>
            <telerik:RadTextBox ID="edDescriptionAnnot" runat="server" Width="450px" Height="100px"
                TextMode="MultiLine" MaxLength="500">
            </telerik:RadTextBox>
        </div>
        <div style="text-align: right; margin-top: 12px;">
             
            <telerik:RadButton runat="server" ID="btnConfirmAnnot" AutoPostBack="false"  OnClientClicked="CancelAnnot"
                ButtonType="StandardButton" Icon-PrimaryIconUrl="~/Images/Icons/055-Check-ok-Icon_16x16.png" >
            </telerik:RadButton>
            <telerik:RadButton runat="server" ID="btnAnnulerAnnot" AutoPostBack="false" OnClientClicked="CancelAnnot" Icon-PrimaryIconUrl="~/Images/Icons/056-Check-not-ok-Icon_16x16.png">
            </telerik:RadButton>
        </div>
    </div>
</div>
 
<telerik:RadScriptBlock ID="RadCodeBlockAnnot" runat="server">
    <script type="text/javascript">
 
        function AjoutAnnot()
        {
            $('#divListAnnot').hide();
            $('#divAjoutAnnot').show();
            $('#divModifAnnot').hide();
        }
 
        function ModifAnnot()
        {
            var currentAnnot = null;
            $('#divListAnnot').hide();
            $('#divAjoutAnnot').hide();
            $('#divModifAnnot').show();
            //var listeAnnot = $find('lbAnnotations'); //$find('<%=lbAnnotations.ClientID%>');
            //var item = listeAnnot.get_selectedItem();
            //alert(item.get_text());
        }
 
        function CancelAnnot()
        {
            $('#divListAnnot').show();
            $('#divAjoutAnnot').hide();
            $('#divModifAnnot').hide();
        }   
    </script>
 
</telerik:RadScriptBlock>


Thank you,

Jeremy

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 14 Nov 2012, 12:56 PM
Hello,

The user control in the tooltip manager is loaded through AJAX which means that inline scripts are not parsed by the framework. You would need to register them from the code-behind (see for example the RegisterClientScriptBlock() method), or you would need to have the scripts already on the main page (e.g. from an external JavaScript file.

Regarding the control reference - you cannot use server code blocks in an external file, they are a feature in ASP, so the server has to parse them in order to replace them with the result from the server operation that was called (in this case getting the ClientID of the control). What you can do is to either move the script to the codebehind where you can get this id, or just get the ID in the code-behind and register a script that will store it in a global variable, or store it in a hidden field, etc. so you can use that in the function itself.


Kind regards,
Marin Bratanov
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.
Tags
ToolTip
Asked by
Jeremy
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or