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
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
| <%@ Page Language="C#" AutoEventWireup="false" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %> | |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> | |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head runat="server"> | |
| <title></title> | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> | |
| </head> | |
| <body> | |
| <form id="form1" runat="server"> | |
| <asp:ScriptManager ID="ScriptManager1" runat="server"> | |
| </asp:ScriptManager> | |
| <div> | |
| <div>#1<asp:TextBox ID="TextBox1" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField1" runat="server" /></div> | |
| <div>#2<asp:TextBox ID="TextBox2" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField2" runat="server" /></div> | |
| <div>#3<asp:TextBox ID="TextBox3" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField3" runat="server" /></div> | |
| <div>#4<asp:TextBox ID="TextBox4" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField4" runat="server" /></div> | |
| <div>#5<asp:TextBox ID="TextBox5" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField5" runat="server" /></div> | |
| <div>#6<asp:TextBox ID="TextBox6" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField6" runat="server" /></div> | |
| <div>#7<asp:TextBox ID="TextBox7" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField7" runat="server" /></div> | |
| <div>#8<asp:TextBox ID="TextBox8" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField8" runat="server" /></div> | |
| <br /><br /> | |
| <telerik:RadComboBox ID="rcmb" runat="server" Skin="Default" Width="300px" | |
| ShowMoreResultsBox="false" EnableVirtualScrolling="false" EnableLoadOnDemand="false" | |
| MarkFirstMatch="false" ItemRequestTimeout="500" OpenDropDownOnLoad="false" ShowDropDownOnTextboxClick="false"> | |
| <Items> | |
| <telerik:RadComboBoxItem Text="Item 1" Value="1" /> | |
| <telerik:RadComboBoxItem Text="Item 2" Value="2" /> | |
| <telerik:RadComboBoxItem Text="Item 3" Value="3" /> | |
| <telerik:RadComboBoxItem Text="Item 4" Value="4" /> | |
| <telerik:RadComboBoxItem Text="Item 5" Value="5" /> | |
| <telerik:RadComboBoxItem Text="Item 6" Value="6" /> | |
| </Items> | |
| </telerik:RadComboBox> | |
| <div>Functions called</div> | |
| <div id="fcts" style="height: 250px; overflow: auto; border: solid 1px gray;"></div> | |
| <script type="text/javascript"> | |
| /* <![CDATA[ */ | |
| Sys.Application.add_load(function() | |
| { | |
| var _activeTb; | |
| var _rcmb = $find("<%= rcmb.ClientID %>"); | |
| _rcmb.get_element().style.position = 'absolute'; | |
| _rcmb.get_element().style.display = 'none'; | |
| _rcmb.set_closeDropDownOnBlur(false); | |
| _rcmb.add_selectedIndexChanged(UpdateValue); | |
| _rcmb.add_onClientBlur(HideDdl); | |
| _rcmb.disable(); | |
| function ShowDdl(tb) | |
| { | |
| $("#fcts").append("ShowDdl()<br />"); | |
| _activeTb = tb; | |
| _rcmb.enable(); | |
| var div = _rcmb.get_element(); | |
| var offset = $(_activeTb).offset(); | |
| div.style.top = offset.top + "px"; | |
| div.style.left = offset.left + "px"; | |
| _rcmb.clearSelection(); | |
| _rcmb.set_text(_activeTb.value); | |
| _rcmb.set_value($("INPUT[type=hidden]", _activeTb.parentNode).val()); | |
| _activeTb.style.visibility = 'hidden'; | |
| div.style.display = ''; | |
| _rcmb.get_inputDomElement().focus(); | |
| if (_rcmb.get_text().length != 0) { | |
| _rcmb.selectText(0, _rcmb.get_text().length); | |
| } | |
| _rcmb.showDropDown(); | |
| } | |
| function UpdateValue(sender, eventArgs) | |
| { | |
| $("#fcts").append("UpdateValue()<br />"); | |
| var item = eventArgs.get_item(); | |
| if (item != null) { | |
| $(_activeTb).val(item.get_text()); | |
| $("INPUT[type=hidden]", _activeTb.parentNode).val(item.get_value()); | |
| } | |
| else { | |
| $(_activeTb).val(""); | |
| $("INPUT[type=hidden]", _activeTb.parentNode).val(""); | |
| } | |
| } | |
| function HideDdl() | |
| { | |
| $("#fcts").append("HideDdl()<br />"); | |
| _activeTb.style.visibility = ''; | |
| _rcmb.hideDropDown(); | |
| /* uncommment the following lines | |
| and the textbox onfocus() event will not be called | |
| in IE after OnClientBlur()... must reclick. | |
| Note: Firefox works ok. |
|
| */ | |
| // _rcmb.get_element().style.display = 'none'; | |
| // _rcmb.disable(); | |
| } | |
| $(".ddl").focus(function() | |
| { | |
| ShowDdl(this); | |
| }); | |
| }); | |
| /* ]]> */ | |
| </script> | |
| </div> | |
| </form> | |
| </body> | |
| </html> | |
4 Answers, 1 is accepted
0
dstj
Top achievements
Rank 1
Rank 1
answered on 10 Jun 2009, 02:30 PM
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.
0
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:
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.
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.
0
dstj
Top achievements
Rank 1
Rank 1
answered on 17 Jun 2009, 08:24 PM
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.
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.
0
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.
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.