New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

RadControls with a popup (RadComboBox, RadDatePicker) in RadToolTip integration behavior


Integration issues when RadControls with a popup (RadComboBox, RadDatePicker) are nested in a RadToolTip


Since the RadToolTip is a popup itself, some small issues related to general popup behavior might occur when another control with popup behavior is nested in the RadToolTip. This article explains what are these problems and provides an easy solution.

The two issues related to the above described scenario are the following ones:

1) The popup of the nested control shows behind the RadToolTip which also needs a big z-index due to expected to usually show on top. This issue is handled by assigning proper z-indexes, bigger than the one of RadToolTip.

2) If the nested popup is not closed when the RadToolTip hides, it stays opened. To resolve this problem you should handle the RadToolTip's OnClientHide client event and close the nested popup through code from there.

Sample code with the suggested solutions implemented and highlighted is available below:

<head runat="server">
    <style type="text/css">
      z-index: 9000 !important;
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">

    &lt;script type="text/javascript"&gt;

    function ComboToolTipHide()
       var combo = $find("&lt;%=combo.ClientID %&gt;");

    function DatePickerToolTipHide()
       var picker = $find("&lt;%=picker.ClientID %&gt;");


    &lt;asp:HyperLink ID="target1" runat="server" Text="Show RadComboBox in RadToolTip"&gt;&lt;/asp:HyperLink&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    &lt;asp:HyperLink ID="target2" runat="server" Text="Show RadDatePicker in RadToolTip"&gt;&lt;/asp:HyperLink&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    &lt;telerik:RadToolTip ID="tooltip1" runat="server" TargetControlID="target1" RelativeTo="element"
        Width="200" Height="200" HideEvent="manualclose" OnClientHide="ComboToolTipHide"&gt;
        &lt;telerik:RadComboBox ID="combo" runat="server" Style="z-index: 9000"&gt;
                &lt;telerik:RadComboBoxItem Text="Test Item" /&gt;
                &lt;telerik:RadComboBoxItem Text="Test Item" /&gt;
                &lt;telerik:RadComboBoxItem Text="Test Item" /&gt;
                &lt;telerik:RadComboBoxItem Text="Test Item" /&gt;
                &lt;telerik:RadComboBoxItem Text="Test Item" /&gt;
    &lt;telerik:RadToolTip ID="RadToolTip1" runat="server" TargetControlID="target2" RelativeTo="element"
        Width="200" Height="200" HideEvent="manualclose" OnClientHide="DatePickerToolTipHide"&gt;
        &lt;telerik:RadDatePicker ID="picker" runat="server"&gt;

</body> </html>

In this article