Combobox in Tooltip - show dropdown on load

6 posts, 0 answers
  1. jc mag
    jc mag avatar
    106 posts
    Member since:
    Aug 2005

    Posted 26 Jan 2011 Link to this post

    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...
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 26 Jan 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 27 Jan 2011 Link to this post

    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.
  5. jc mag
    jc mag avatar
    106 posts
    Member since:
    Aug 2005

    Posted 31 Jan 2011 Link to this post

    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?
  6. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 03 Feb 2011 Link to this post

    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.
  7. jc mag
    jc mag avatar
    106 posts
    Member since:
    Aug 2005

    Posted 03 Feb 2011 Link to this post

    It works perfectly :) Thank you very much!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017