Two RadToolTip entry fields using RequiredFieldValidator conflicts with each other

7 posts, 0 answers
  1. IQworks
    IQworks avatar
    372 posts
    Member since:
    Dec 2008

    Posted 05 Sep 2009 Link to this post

    Hi,

    I have a situation where I have One control that is used to enter Exercise Equipment, it is called the Equipment Maint. This EquipmentMaint has two child controls (programs). One allows you to enter the

    type of equipment, the other child control allows you to enter the location of the equipment.

    Each child control program uses a RadToolTip to accept the name of the type or name of the location. I am trying to use a

    asp:RequiredFieldValidator in each child control program to make sure there is a name entered.

     

    When I click on the "Add new Location", the RadToolTip appears that allows me to enter the location name. The problem is that even though I enter the location name, the RadToolTip stays on the screen. I found out that this happens because even though the Type name RadToolTip has not been called yet, the

    asp:RequiredFieldValidator placed in both control programs requires both controls to have thier particular name field populated. In other words, even though the Location program RadToolTip name field is populated, its RadToopTip will not go away until the type name is populated, and, even though the type location program RadToolTip name field is populated, its RadToopTip will not go away until the location name is populated
    I read this ....

     

    6. RequiredFieldValidator inside the RadToolTip
    When you use a RequiredFieldValidator inside a RadToolTip you add the RequiredFieldValidator to the page, not only to the displayed in the tooltip part of it. After that, when you click any of your page’s elements which cause validation, those trigger the check of the validator, which fails even if the content of the tooltip is invisible. That is why, in such scenarios you have to set the CausesValidation property to false for all elements on the page that do not require it.

    So, I guess my question is obvious - how do I handle validation in this scenario.
    Is there a telerik efficient way to do this ?

    thanks

  2. IQworks
    IQworks avatar
    372 posts
    Member since:
    Dec 2008

    Posted 05 Sep 2009 Link to this post

    I did try a javascript solution. The javascripts needs to be registered because of other aspects of this application (in line clientscriptblocks cannot be seen when call the EquipmentMaint from my grid program).
    this is the script I want to try, problem is I cannot get the toolTip var to be seen as a RadToolTip. It see's it as an object, so, the set_targetControlID is not a method for it. I think I need to set_targetControlID to be able to redisplay the tooltip if the name field is blank ?  I saw the post (http://demos.telerik.com/aspnet-ajax/tooltip/examples/clientsideapi/defaultcs.aspx ) perhaps I mis-read it ?...

        <telerik:RadToolTip ID="iqQAddRadToolTip" runat="server" 
    Skin="Office2007"      
    Position="BottomCenter" RelativeTo="Element" 
    Title="Enter New Location"    
    Modal="True" ShowDelay="0"    
    ShowCallout="false" ShowEvent="OnClick" Width="250px" 
     TargetControlID="lcsAddLocation"    
      HideEvent="ManualClose">  
    <telerik:RadTextBox ID="iqQlname" Runat="server"   
    Label="Name .........:" Skin="WebBlue" Width="250px">  
    </telerik:RadTextBox> 
    <asp:Label ID="iqQlblError" runat="server" ForeColor="Red">  
         
    </asp:Label> 
    <br /> 
    <telerik:RadTextBox TextMode="MultiLine" ID="iqQldesc" Runat="server"   
    Skin="WebBlue" Label="Description:" Width="250px" > 
    </telerik:RadTextBox> 
    <br /> 
    <asp:Button ID="iqLocAddButton" runat="server" Text="Save" 
     OnClientClick="locValidate()"   
     OnCommand="iqlcsQAdd_Click" /> 
    <asp:Button ID="iqLocCancelButton" runat="server" Text="Cancel" OnCommand="iqlcsQCancel_Click" /> 
    </telerik:RadToolTip>   
     

    This is the JS ....
    // 090904a   
         // Use document.forms for iqQlname and iqQldesc because they are telerik:RadTextBoxes  
         // Use $Find for iqQlblError because it is an <asp:Label  
         string vscriptl = "function locValidate(sender, args) {" +  
         "var lname =  document.forms[0]['" + iqQlname.ClientID + "'].value;" +  
         "var ldesc =  document.forms[0]['" + iqQldesc.ClientID + "'].value;" +  
         "var lerr='';" +  
         "if(lname=='') {" +  
         "lerr='Must Enter Name';" +  
         " }" +  
          "if(ldesc=='') {" +  
         "lerr=='Must Enter Description';" +  
         " }" +  
        " var err = $find('" + iqQlblError.ClientID + "');" +    
         " err=lerr;"  +  
         " var tootlTip2 = $find('" + iqQAddRadToolTip.ClientID + "');" +  
          // undefined "alert(typeof toolTip2); " +  
           "var toolTip = document.getElementById('" + iqQAddRadToolTip.ClientID + "'); " +  
           // object "alert(typeof toolTip); " +  
          " var activeToolTip = Telerik.Web.UI.RadToolTip.getCurrent();" +  
            
           " toolTip.set_targetControlID('" + lcsAddLocation.ClientID + "');" +  
       // " alert('in LOCATION VALIDATION   ' + lerr + ' ' + err+ ' ' + toolTip); " +  
        //"document.forms[0]['" + iqQAddRadToolTip.ClientID + "'].show();" +  
           "tooltip.show();" +  
         " }";  
         ScriptManager.RegisterClientScriptBlock(Page, typeof(Page), "locVal", vscriptl, true);    

      The script runs, but I dont know what I am doing here with getting the tooltip id, and then trying to redisplay it if the name or description is blank.

    thanks as always for your help ...
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 09 Sep 2009 Link to this post

    Hi IQworks,

    I am not completely sure about your exact scenario and the provided explanations were not enough to completely understand the whole situation. However, since you have come up with script which does what you want, you can use it if its logic meets your needs. As to the problem with the script, it comes from the fact that you have not correctly referenced the tooltip - in order to get the client object you should use the following syntax:


    var tootlTip2
     = $find("<%=iqQAddRadToolTip.ClientID%>");




    Sincerely yours,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. IQworks
    IQworks avatar
    372 posts
    Member since:
    Dec 2008

    Posted 09 Sep 2009 Link to this post

    Hi Svetlina
       I have tried this .... 
    var tootlTip2 = $find("<%=iqQAddRadToolTip.ClientID%>"); 
       But because I am building a script, i have to do it this way ..... 
      // 090829a  
         // For external dropdown use, capture datetime for add button.   
         // 090903b if (document.forms[0]['" + iqlcsClientTime.ClientID + "'])  
         string scriptl = "function locDateTime() {" +  
         " var dte = new Date(); " +  
       //" alert('in LOCATION script'); " +  
         "if (document.forms[0]['" + iqlcsClientTime.ClientID + "']) { " +  
         " document.forms[0]['" + iqlcsClientTime.ClientID + "'].value = dte.toLocaleString();" +  
        " }" +  
        " }";  
         // So the script will run on startup  
         // 090830a  
         ScriptManager.RegisterStartupScript(Page, typeof(Page), "script2Loc", scriptl, true);  
         // so the script will run on submit   
         string onSubmitl = "locDateTime();";  
         ScriptManager.RegisterOnSubmitStatement(Page, typeof(Page), "scriptOnSubmitLoc", onSubmitl);  
         // 090829a Done with datetime addsubmit.   
     
         // 090904a   
         // Use document.forms for iqQlname and iqQldesc because they are telerik:RadTextBoxes  
         // Use $Find for iqQlblError because it is an <asp:Label  
         string vscriptl = "function locValidate() {" +  
         "var lname =  document.forms[0]['" + iqQlname.ClientID + "'].value;" +  
         "var ldesc =  document.forms[0]['" + iqQldesc.ClientID + "'].value;" +  
         "var lerr='';" +  
         "alert('In the thing'); " +   
         "if(lname=='') {" +  
         "lerr='Must Enter Name';" +  
         " }" +  
          "if(ldesc=='') {" +  
         "lerr=='Must Enter Description';" +  
         " }" +  
        " var err = $find('" + iqQlblError.ClientID + "');" +    
         " err=lerr;"  +  
         " var tootlTip2 = $find('" + iqQAddRadToolTip.ClientID + "');" +  
          // undefined "alert(typeof toolTip2); " +  
          // "var toolTip = document.getElementById('" + iqQAddRadToolTip.ClientID + "'); " +  

          // to show Svetlina
          "var tootlTip = $find('<%=iqQAddRadToolTip.ClientID%>'); " +  


         "alert(typeof toolTip); " +  
          " var activeToolTip = Telerik.Web.UI.RadToolTip.getCurrent();" +        
           " toolTip.set_targetControlID('" + lcsAddLocation.ClientID + "');" +  
       // " alert('in LOCATION VALIDATION   ' + lerr + ' ' + err+ ' ' + toolTip); " +  
        //"document.forms[0]['" + iqQAddRadToolTip.ClientID + "'].show();" +  
           "tooltip.show();" +  
         " }";  
         ScriptManager.RegisterClientScriptBlock(Page, typeof(Page), "locVal", vscriptl, true);    
    I am calling this with a button .... 
    <asp:Button ID="iqLocAddButton" runat="server" Text="Save" 
     OnClientClick="locValidate()"   
     OnCommand="iqlcsQAdd_Click" /> 
    but i get the error "Undefined" in the first alert and then "tooltip undefined" in the second alert. 
    Do I need to use the Telerik $find here ?
    This ...

     

    "var tootlTip = $find('" + <%=iqQAddRadToolTip.ClientID%> + "'); " +
    Gives an invalid expression error ? 



     
          
     

  6. IQworks
    IQworks avatar
    372 posts
    Member since:
    Dec 2008

    Posted 13 Sep 2009 Link to this post

    Hi Svetlina, 
         I have tried your suggestion of using var tootlTip2 = $find("<%=iqQAddRadToolTip.ClientID%>");

     

    // undefined "var tootlTip = $find('<%=iqQAddRadToolTip.ClientID%>'); " +

     

     

    // undefined "var tootlTip = $find(" + "'<%=iqQAddRadToolTip.ClientID%>'" + "); " +
    in two different ways, but they come back as undefined.
    but I cannot seem to get it to work while building a script string. But, 

    Whats confusing is that this statement

     

     

    " var tootlTip2 = $find('" + iqQAddRadToolTip.ClientID + "');" +

     

    when looked at in viewsource, actually see's it correctly

    <script type="text/javascript">

    //<![CDATA[

    function locValidate() {var lname = document.forms[0]['iqEXTLocationUC_iqQlname'].value;var ldesc = document.forms[0]['iqEXTLocationUC_iqQldesc'].value;var lerr='';alert('In the thing'); if(lname=='') {lerr='Must Enter Name'; }if(ldesc=='') {lerr=='Must Enter Description'; } var err = $find('iqEXTLocationUC_iqQlblError'); err=lerr; var tootlTip2 = $find('iqEXTLocationUC_iqQAddRadToolTip') ;var tootlTip = $find('<%=iqQAddRadToolTip.ClientID%>'); alert(typeof toolTip); var activeToolTip = Telerik.Web.UI.RadToolTip.getCurrent(); toolTip.set_targetControlID('iqEXTLocationUC_lcsAddLocation');tooltip.show(); }//]]>

    </script>

    But tooltip2 still shows undefined in an alert I am using further down in the code. I am confused ??

    Please understand that I know this is not a telerik issue, and I know you guys dont have time to help me code, but if you have an example of how your suggestion can be coded in building a script string, that would be great for me to refer to. 
    In the mean, I have sent in a support ticket (242195)  asking for help in just finding a way to have two RadToolTips with RequiredValidation coexist and work together.

    thanks for your help

  7. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 15 Sep 2009 Link to this post

    Hello IQworks,

    I already answered your support thread and you can find information about the validators there.

    As to the reference of the tooltip from code behind, what I noticed is that your code is actually executed too early, before the tooltip's client object is created.

    The controls in the RadControls for ASP.NET AJAX suite are built upon the MS AJAX framework and the framework itself creates its controls (including RadToolTip) in the Sys.Application.add_init() method.

    Here is how the client events are fired in the page life cycle:

    window.onload -> Sys.Application.init -> Sys.Application.load

    You can see that the client object representation of MS AJAX controls are created just as the last code on the page in the Sys.Application.init event, which is raised after the window.onload event.

    That is why when you call your code in window.onload by registering the client script, the RadToolTip will still not be created on the page and you will get an error. To avoid this problem, you can either execute your code with a small timeout, or use the Sys.Application.add_load method.

    Regards,

    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  8. IQworks
    IQworks avatar
    372 posts
    Member since:
    Dec 2008

    Posted 15 Sep 2009 Link to this post

    Svetlina,

        Thanks for the information about the page cycle. I have documented it for the future.
        The answer to the problem in this post ended up being your suggestion in my support ticket of using a different validationgroup for both programs.
        This allowed each program to have its own RequiredFieldValidator with on its own RadToolTip without pgm A's validation needing to wait for pgm B's validation to be successful and/or visa versa.
           
    Thanks again.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017