RadComboBox for ASP.NET

ItemTemplate Event Problems Send comments on this topic.
TroubleShooting > ItemTemplate Event Problems

Glossary Item Box

Let's say you have placed a simple HTML TextBox in an ItemTemplate of RadComboBox.

RadComboBox will intercept all the input events - mouse_clicks, key_ presses, etc. Any mouse_click inside the drop-down will immediately close the drop-down - even if you click inside the TextBox. This issue is due to the DOM event bubbling - any event from child element (e.g. the TextBox) bubbles up to its parent (the combobox) unless bubbling is stopped. To solve the problem, cancel the event bubbling and enable the text selection you should use the following approach:

ASPX Copy Code
<ItemTemplate>
   
<input type="text" onclick="event.cancelBubble=true"     
    
onselectstart="event.cancelBubble=true" />
</ItemTemplate>

Even if you place RadTreeView inside an ItemTemplate of RadComboBox, you can use an approach similar to the one above by wrapping the tree control with a DIV tag, like:

  Copy Code
<div onclick="event.cancelBubble=true">

Furthermore, if you want to fire the server event of the control that is embedded in the ItemTemplate, you should do the following:

    • Hook on the OnClientSelectedIndexChanging event
    • return false to prevent the combobox from posting back and let the server event of the embedded control to be fired
Note that, in this case, the text of the input field will not be changed to the text of the clicked item. You can achieve this by setting AllowCustomText property to true and call the SetText() client-side method of RadComboBox.

Example

ASPX Copy Code
<script type="text/javascript">   
   
function OnClientSelectedIndexChanging(item)  
   {   
       item.ComboBox.SetText(item.Text);  
       return false;       
   }   
</script>   
<rad:RadComboBox
   
ID="RadComboBox1"
   
runat="server"
   
SkinsPath="~/RadControls/ComboBox/Skins"
   
Width="150px"  
   
OnClientSelectedIndexChanging="OnClientSelectedIndexChanging"  
   
AllowCustomText=true>  
   
<Items>
        
<rad:RadComboBoxItem runat="server" Text="RadComboBoxItem1" />
        
<rad:RadComboBoxItem runat="server" Text="RadComboBoxItem2" />
        
<rad:RadComboBoxItem runat="server" Text="RadComboBoxItem3" />
   
</Items>
   
<ItemTemplate>
       
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>
   
</ItemTemplate>
</rad:RadComboBox>