UserControl Tooltip

2 posts, 0 answers
  1. Jeremy
    Jeremy avatar
    3 posts
    Member since:
    Oct 2012

    Posted 13 Nov 2012 Link to this post

    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
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 14 Nov 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top