Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Combobox in Tooltip - show dropdown on load

5 Answers 180 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
jc mag
Top achievements
Rank 1
jc mag asked on 26 Jan 2011, 02:11 PM
I have a RadCombobox in a tooltip, and want the dropdown to be shown when the tooltip is displayed. But setting OpenDropDownOnLoad to true doesn't work...

5 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 27 Jan 2011, 05:48 AM
Hello,


You can make use of client side api to show the dropdown on loading the RadComboBox. Invoke the "showDropDown()" method of RadComboBox client side object.

More information:
RadComboBox object 



-Shinu.
0
Svetlina Anati
Telerik team
answered on 27 Jan 2011, 02:57 PM
Hi jc mag,

 In addition, you should set the z-index to be bigger than the one of the RadToolTip - for your convenience I prepared for you a sample page which shows the approach:

<%@ Page Language="C#" %>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
    <style type="text/css">
        html, body, form
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <script type="text/javascript">
  
        function OnClientShow()
        {
            var combo = $find("<%= box.ClientID %>");
            combo.showDropDown();
        }
  
        function OnClientHide()
        {
            var combo = $find("<%= box.ClientID %>");
            combo.hideDropDown();
        }
    </script>
    <telerik:RadToolTip ID="tt" runat="server" Width="300" Height="300" VisibleOnPageLoad="true"
        RelativeTo="BrowserWindow" OnClientShow="OnClientShow" OnClientHide="OnClientHide">
        <telerik:RadComboBox ID="box" runat="server" Style="z-index: 10000">
            <Items>
                <telerik:RadComboBoxItem Text="Test" />
                <telerik:RadComboBoxItem Text="Test" />
                <telerik:RadComboBoxItem Text="Test" />
                <telerik:RadComboBoxItem Text="Test" />
                <telerik:RadComboBoxItem Text="Test" />
                <telerik:RadComboBoxItem Text="Test" />
                <telerik:RadComboBoxItem Text="Test" />
                <telerik:RadComboBoxItem Text="Test" />
                <telerik:RadComboBoxItem Text="Test" />
                <telerik:RadComboBoxItem Text="Test" />
                <telerik:RadComboBoxItem Text="Test" />
            </Items>
        </telerik:RadComboBox>
    </telerik:RadToolTip>
    </form>
</body>
</html>
Greetings,
Svetlina
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
jc mag
Top achievements
Rank 1
answered on 31 Jan 2011, 03:12 PM
Thanks Svetlina for your sample, but actually my ComboBox is in a UserControl that I load like this:
<telerik:RadToolTipManager ID="tooltipSendBook" runat="server" Skin="Telerik" ManualClose="true" OnAjaxUpdate="tooltipSendBook_AjaxUpdate" Position="TopCenter" Width="360" Height="70">
</telerik:RadToolTipManager>

protected void tooltipSendBook_AjaxUpdate(object sender, ToolTipUpdateEventArgs e)
    {
         Control ctrl = Page.LoadControl("UserControls/ucSendNewsToBook.ascx");
            e.UpdatePanel.ContentTemplateContainer.Controls.Add(ctrl);
    }

How can I do in this case?
0
Svetlina Anati
Telerik team
answered on 03 Feb 2011, 10:00 AM
demo.zip
Hello jc mag,

 There are a few possible wayes to achieve what you want and they are related to general ASP.NET and MS AJAX knowledge when dealing with scripts.

For your convenience and for others who might have the same question, I prepared teh following sample code:


main page:

<%@ Page Language="C#" %>
  
<%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        html, body, form
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <script type="text/javascript">
        var comboId = null;
        function ShowDropDown(id)
        {
            setTimeout(function ()
            {
                var combo = $find(id);
                combo.showDropDown();
                comboId = id;
            }, 500);
        }
  
        function OnClientHide()
        {
            if (!comboId) return;
            var combo = $find(comboId);
            combo.hideDropDown();
            comboId = null;
        } 
    </script>
    <script type="text/C#" runat="server">
  
        protected void OnAjaxUpdate(object sender, ToolTipUpdateEventArgs e)
        {
            e.UpdatePanel.ContentTemplateContainer.Controls.Add(Page.LoadControl("WebUserControl1.ascx"));
        }
  
  
    </script>
    <asp:HyperLink ID="target" runat="server" Text="Show RadToolTip"></asp:HyperLink>
    <telerik:RadToolTipManager ID="tt" runat="server" Width="300" Height="300" RelativeTo="BrowserWindow"
        OnClientHide="OnClientHide" OnAjaxUpdate="OnAjaxUpdate">
        <TargetControls>
            <telerik:ToolTipTargetControl TargetControlID="target" />
        </TargetControls>
    </telerik:RadToolTipManager>
    </form>
</body>
</html>

user control:

<%@ Control Language="C#" %>
<%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>
<script type="text/C#" runat="server">
  
    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
        ScriptManager.RegisterStartupScript(this, GetType(), "addScript", "ShowDropDown('" + box.ClientID + "');", true);
    }
  
</script>
<telerik:RadComboBox ID="box" runat="server" Style="z-index: 10000">
    <Items>
        <telerik:RadComboBoxItem Text="Test" />
        <telerik:RadComboBoxItem Text="Test" />
        <telerik:RadComboBoxItem Text="Test" />
        <telerik:RadComboBoxItem Text="Test" />
        <telerik:RadComboBoxItem Text="Test" />
        <telerik:RadComboBoxItem Text="Test" />
        <telerik:RadComboBoxItem Text="Test" />
        <telerik:RadComboBoxItem Text="Test" />
        <telerik:RadComboBoxItem Text="Test" />
        <telerik:RadComboBoxItem Text="Test" />
        <telerik:RadComboBoxItem Text="Test" />
    </Items>
</telerik:RadComboBox>

I also attached the relevant runnable files to the thread for your reference.

I hope that the code I prepared for you is helpful, let me know how it goes.

Regards,
Svetlina
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
jc mag
Top achievements
Rank 1
answered on 03 Feb 2011, 05:27 PM
It works perfectly :) Thank you very much!
Tags
ToolTip
Asked by
jc mag
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Svetlina Anati
Telerik team
jc mag
Top achievements
Rank 1
Share this question
or