Client API: Toggling display breaks event calls in IE

5 posts, 0 answers
  1. dstj
    dstj avatar
    82 posts
    Member since:
    Oct 2006

    Posted 10 Jun 2009 Link to this post

    Hi,

    This is a follow up question from this thread. The scenario is that for each item of list A we assign an item from list B. The previous thread resulted in me using one single invisible RadComboBox and manipulate it though javascript to reuse it to make the list B selection. I save the association in an hidden field for each item. I do this using the TextBox onfocus() to show the RadCombo and the RadCombo's OnClientBlur() to hide it.

    It works OK in Firefox, but I noticed that in IE 6,7,8, the line _rcmb.get_element().style.display = 'none'; in OnClientBlur() will cause the onfocus() event of the textbox to not be called when clicking to a new textbox. I must click the textbox twice OR click elsewhere to have OnClientBlur() called and then click a new textbox to have onfocus() called.

    Here a sample project's code, run it and comment or uncomment lines 110 and 111 to reproduce the problem.

    Thanks,

    Dominic
    Using v.2009.1.527.35

    1 <%@ Page Language="C#" AutoEventWireup="false" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %> 
    2  
    3 <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    5 <html xmlns="http://www.w3.org/1999/xhtml"
    6 <head runat="server"
    7    <title></title
    8    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    9 </head> 
    10 <body> 
    11    <form id="form1" runat="server"
    12    <asp:ScriptManager ID="ScriptManager1" runat="server"
    13    </asp:ScriptManager> 
    14     
    15    <div> 
    16       <div>#1<asp:TextBox ID="TextBox1" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField1" runat="server" /></div
    17       <div>#2<asp:TextBox ID="TextBox2" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField2" runat="server" /></div
    18       <div>#3<asp:TextBox ID="TextBox3" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField3" runat="server" /></div>       
    19       <div>#4<asp:TextBox ID="TextBox4" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField4" runat="server" /></div
    20       <div>#5<asp:TextBox ID="TextBox5" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField5" runat="server" /></div
    21       <div>#6<asp:TextBox ID="TextBox6" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField6" runat="server" /></div
    22       <div>#7<asp:TextBox ID="TextBox7" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField7" runat="server" /></div
    23       <div>#8<asp:TextBox ID="TextBox8" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField8" runat="server" /></div
    24        
    25       <br /><br /> 
    26       <telerik:RadComboBox ID="rcmb" runat="server" Skin="Default" Width="300px" 
    27          ShowMoreResultsBox="false" EnableVirtualScrolling="false" EnableLoadOnDemand="false" 
    28          MarkFirstMatch="false" ItemRequestTimeout="500" OpenDropDownOnLoad="false" ShowDropDownOnTextboxClick="false"
    29          <Items> 
    30             <telerik:RadComboBoxItem Text="Item 1" Value="1" /> 
    31             <telerik:RadComboBoxItem Text="Item 2" Value="2" /> 
    32             <telerik:RadComboBoxItem Text="Item 3" Value="3" /> 
    33             <telerik:RadComboBoxItem Text="Item 4" Value="4" /> 
    34             <telerik:RadComboBoxItem Text="Item 5" Value="5" /> 
    35             <telerik:RadComboBoxItem Text="Item 6" Value="6" /> 
    36          </Items> 
    37       </telerik:RadComboBox> 
    38  
    39       <div>Functions called</div> 
    40       <div id="fcts" style="height: 250px; overflow: auto; border: solid 1px gray;"></div> 
    41        
    42       <script type="text/javascript"
    43          /* <![CDATA[ */
    44          Sys.Application.add_load(function()
    45          {
    46             var _activeTb;
    47             var _rcmb = $find("<%= rcmb.ClientID %>");
    48             _rcmb.get_element().style.position = 'absolute';
    49             _rcmb.get_element().style.display = 'none';
    50             _rcmb.set_closeDropDownOnBlur(false);
    51
    52             _rcmb.add_selectedIndexChanged(UpdateValue);
    53             _rcmb.add_onClientBlur(HideDdl);
    54             _rcmb.disable();
    55
    56             function ShowDdl(tb)
    57             {
    58                $("#fcts").append("ShowDdl()<br />");
    59             
    60                _activeTb = tb;
    61                _rcmb.enable();
    62
    63                var div = _rcmb.get_element();
    64
    65                var offset = $(_activeTb).offset();
    66                div.style.top = offset.top + "px";
    67                div.style.left = offset.left + "px";
    68
    69                _rcmb.clearSelection();
    70
    71                _rcmb.set_text(_activeTb.value);
    72                _rcmb.set_value($("INPUT[type=hidden]", _activeTb.parentNode).val());
    73
    74                _activeTb.style.visibility = 'hidden';
    75                div.style.display = '';
    76
    77                _rcmb.get_inputDomElement().focus();
    78                if (_rcmb.get_text().length != 0) {
    79                   _rcmb.selectText(0, _rcmb.get_text().length);
    80                }
    81                _rcmb.showDropDown();
    82             }
    83
    84             function UpdateValue(sender, eventArgs)
    85             {
    86                $("#fcts").append("UpdateValue()<br />");
    87             
    88                var item = eventArgs.get_item();
    89                if (item != null) {
    90                   $(_activeTb).val(item.get_text());
    91                   $("INPUT[type=hidden]", _activeTb.parentNode).val(item.get_value());
    92                }
    93                else {
    94                   $(_activeTb).val("");
    95                   $("INPUT[type=hidden]", _activeTb.parentNode).val("");
    96                }
    97             }
    98
    99             function HideDdl()
    100             {
    101                $("#fcts").append("HideDdl()<br />");
    102                _activeTb.style.visibility = '';
    103                _rcmb.hideDropDown();
    104                
    105 /* uncommment the following lines 
    106    and the textbox onfocus() event will not be called 
    107    in IE after OnClientBlur()... must reclick.
    108    Note: Firefox works ok.
    109 */
    110 //               _rcmb.get_element().style.display = 'none';
    111 //               _rcmb.disable();
    112             }
    113
    114             $(".ddl").focus(function()
    115             {
    116                 ShowDdl(this);
    117             });
    118          });
    119
    120          /* ]]> */ 
    121       </script> 
    122  
    123    </div> 
    124    </form> 
    125 </body> 
    126 </html> 
    127  

  2. dstj
    dstj avatar
    82 posts
    Member since:
    Oct 2006

    Posted 10 Jun 2009 Link to this post

    One more question : Switching textboxes with the TAB button is also non working because of all the hidding / showing going on. If you know of a way I could fix this, it would be much appreciated.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 17 Jun 2009 Link to this post

    Hello Dominic,

    I suggest you check whether the user has clicked in a textbox and in this case not to call the javascript lime which causes the problem:

     if(args.get_domEvent() != null &&  
        args.get_domEvent().srcElement != null &&   
        args.get_domEvent().srcElement.className == "ddl")  
    {  
    }  
    else 
    {  
        _rcmb.get_element().style.display = "none";   
        _rcmb.disable();   

    Greetings,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. dstj
    dstj avatar
    82 posts
    Member since:
    Oct 2006

    Posted 17 Jun 2009 Link to this post

    Hi. Thanks for the reply.

    It works, but it does looks like a quick patch, wouldn't you agree? Do you know why it's the OnFocus of the TextBox that is not being called. What does hiding or disabling the RadComboBox has to do with an independant TextBox onfocus event?

    Plus, it works fine in Firefox, but not in IE? Is it IE at fault or Telerik? Thanks for your help!

    dstj.
  6. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 18 Jun 2009 Link to this post

    Hello Dominic,

    This is a specific scenario and I am not quite sure what is the cause of the problem,  this is the only workaround we can provide at the moment.

    All the best,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017