Telerik Forums / UI for ASP.NET AJAX Forum / ToolBar /

RadToolBarSplitButton

Telerik UI for ASP.NET AJAX
Resources Buy Try

6 posts, 0 answers

Patrick Stovall

22 posts

Member since:
Jan 2008

Posted 21 Apr 2008 Link to this post

I am utilizing a RadToolBarSplitButton. When the control expands, the rendering is shifted either too far to the right of the splitbutton or is off the page to the right. How do I get the expanded portion of the split button to render directly below?
Erjan Gavalji
Admin

1455 posts

Posted 22 Apr 2008 Link to this post

Hi Patrick,

It seems that for some reason the proper detection of the dropdown has failed. Could it be that your page is running in non-standards compliant mode? Can you either open a formal support ticket and send us the page or paste its content (VS HTML view) here so that we can check it?

Kind regards,
Erjan Gavalji
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

Patrick Stovall

22 posts

Member since:
Jan 2008

Posted 22 Apr 2008 Link to this post

This is in a master page (also, the control that is the problem is the Quick Links toolbar. The options for it our being loaded in the page load of the code behind.:

    
            <%@ Master Language="C#" AutoEventWireup="true" CodeFile="OnBoardDefault.master.cs" Inherits="Masters_OnBoardDefault" 
        
                EnableViewState="true" %> 
        
            <%@ 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 id="Head1" runat="server">  
        
               <title>OnBoard</title> 
        
               <asp:ContentPlaceHolder ID="head" runat="server">  
        
                  <link href="../App_Themes/Default/Default.css" rel="stylesheet" type="text/css" /> 
        
               </asp:ContentPlaceHolder> 
        
               <script type="text/javascript">  
        
                        function OnClientShow(sender, eventArgs)  
        
                        {  
        
                            var screenHeight = document.documentElement.clientHeight;  
        
                            var screenWidth = document.documentElement.clientWidth;  
        
                            sender.SetHeight(parseInt(screenHeight - 150));   
        
                            sender.SetWidth(parseInt(screenWidth - 150));  
        
                            sender.Center();  
        
                        }  
        
                        function mngRequestStarted(ajaxManager, eventArgs)  
        
                        {  
        
                           if(eventArgs.EventTarget.indexOf("excel") != -1)  
        
                           {  
        
                              eventArgs.EnableAjax = false;  
        
                           }  
        
                        }  
        
               </script> 
        
            </head> 
        
            <body> 
        
               <form id="form1" runat="server">  
        
               <div> 
        
                  <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                  </telerik:RadScriptManager> 
        
                  <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"   
        
                       DefaultLoadingPanelID="UpdatePanelStatusLoading">  
        
                      <AjaxSettings> 
        
                          <telerik:AjaxSetting AjaxControlID="rtbMainMenu">  
        
                              <UpdatedControls> 
        
                                  <telerik:AjaxUpdatedControl ControlID="rtvNavigation" /> 
        
                              </UpdatedControls> 
        
                          </telerik:AjaxSetting> 
        
                      </AjaxSettings> 
        
                    </telerik:RadAjaxManager> 
        
                  <asp:SiteMapDataSource ID="modulesSource" runat="server" SiteMapProvider="DefaultSiteMapProvider" 
        
                     ShowStartingNode="false" /> 
        
                  <asp:SiteMapDataSource ID="moduleActionsSource" runat="server" SiteMapProvider="DefaultSiteMapProvider" 
        
                      ShowStartingNode="false" StartingNodeOffset="1" /> 
        
                  <div id="mainwrapper" style="width: 98%">  
        
                     <div id="header">  
        
                        <table width="100%">  
        
                           <tr> 
        
                              <td align="left" valign="baseline" style="padding-bottom:10px"><asp:Label ID="lblOnBoard" runat="server" ForeColor="LightSlateGray" Font-Bold="true" Font-Size="X-Large" Text="OnBoard"></asp:Label></td>  
        
                           </tr> 
        
                        </table> 
        
                        <table class="buttonbarheader" id="Table1" width="100%">  
        
                           <tr> 
        
                              <td align="left" style="width:70%">  
        
                                 <telerik:RadToolBar ID="rtbMainMenu" runat="server" 
        
                                    onbuttonclick="rtbMainMenu_ButtonClick">  
        
                                    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
        
                                    <Items> 
        
                                    </Items> 
        
                                 </telerik:RadToolBar> 
        
                              </td> 
        
                              <td align="right">  
        
                                 <telerik:RadToolBar ID="QuickLinksToolbar" runat="server" style="float:left;">  
        
                                 </telerik:RadToolBar> 
        
                                 <telerik:RadAjaxPanel ID="ToolBarAjaxPanel" runat="server" > 
        
                                 <telerik:RadToolBar ID="RadToolBar1" runat="server" style="float:right;z-index:90001" 
        
                                    onbuttonclick="RadToolBar1_ButtonClick">  
        
                                     <CollapseAnimation Duration="200" Type="OutQuint" /> 
        
                                    <Items> 
        
                                       <telerik:RadToolBarButton runat="server" ToolTip="Error Management" CommandName="errors" 
        
                                          ImageUrl="../App_Themes/Default/Images/error.png" /> 
        
                                       <telerik:RadToolBarButton runat="server" ToolTip="Reports" CommandName="reports" 
        
                                          ImageUrl="../App_Themes/Default/Images/report.png" /> 
        
                                       <telerik:RadToolBarButton runat="server" ID="buttonInquiry" ToolTip="Inquiry" CommandName="inquiry" 
        
                                          ImageUrl="../App_Themes/Default/Images/computer_link.png" Target="_blank" /> 
        
                                       <telerik:RadToolBarButton runat="server" ToolTip="Password Change" CommandName="passwordchange" 
        
                                          ImageUrl="../App_Themes/Default/Images/application_key.png" /> 
        
                                          <telerik:RadToolBarButton runat="server" ToolTip="LogOut" CommandName="logout" 
        
                                          ImageUrl="~/App_Themes/Default/Images/lock_delete.png" /> 
        
                                    </Items> 
        
                                 </telerik:RadToolBar> 
        
                                 <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="WebBlue">  
        
                                    <Windows> 
        
                                       <telerik:RadWindow ID="Reports" runat="server" NavigateUrl="~/Reports/Reports.aspx" 
        
                                          OnClientShow="OnClientShow" Behaviors="Resize, Close, Reload" VisibleStatusbar="False" 
        
                                          Style="display: none;" Left="" Top="" /> 
        
                                       <telerik:RadWindow ID="ExternalLinkInquiry" runat="server" NavigateUrl="~/CustomerServices/Inquiry.aspx" 
        
                                          OnClientShow="OnClientShow" Behaviors="Resize, Minimize, Close, Move" VisibleStatusbar="False" 
        
                                          Style="display: none;" Left="" Top="" /> 
        
                                       <telerik:RadWindow ID="ErrorManagement" runat="server" NavigateUrl="~/Errors/ErrorManager.aspx" 
        
                                          OnClientShow="OnClientShow" Behaviors="Close, Reload" VisibleStatusbar="False" 
        
                                          Style="display: none;" Left="" Top="" /> 
        
                                    </Windows> 
        
                                 </telerik:RadWindowManager>                       
        
                                 </telerik:RadAjaxPanel> 
        
                              </td> 
        
                           </tr> 
        
                        </table> 
        
                     </div> 
        
                     <div id="body" style="height: 98%; width: 100%">  
        
                        <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%">  
        
                           <telerik:RadPane ID="navigationPane" runat="server" Width="200">  
        
                           <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" > 
        
                              <fieldset class="fieldsetheader">  
        
                                 <legend class="legendHeader">Navigation</legend> 
        
                                 <telerik:RadTreeView ID="rtvNavigation" runat="server">  
        
                                    <Nodes> 
        
                                    <telerik:RadTreeNode></telerik:RadTreeNode> 
        
                                    </Nodes> 
        
                                    <CollapseAnimation Duration="100" Type="OutQuint" /> 
        
                                    <ExpandAnimation Duration="100" /> 
        
                                 </telerik:RadTreeView> 
        
                              </fieldset> 
        
                              </telerik:RadAjaxPanel> 
        
                           </telerik:RadPane> 
        
                           <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward" /> 
        
                           <telerik:RadPane ID="contentPane" runat="server">  
        
                              <telerik:RadAjaxPanel runat="server" id="UpdatePanelStatus" ClientEvents-OnRequestStart="mngRequestStarted" LoadingPanelid="UpdatePanelStatusLoading" > 
        
                                      <asp:ContentPlaceHolder id="DefaultContent" runat="server">  
        
                                      </asp:ContentPlaceHolder> 
        
                              </telerik:RadAjaxPanel> 
        
                              <telerik:RadAjaxLoadingPanel id="UpdatePanelStatusLoading" runat="server" Transparency="30">  
        
                                  <asp:Image id="LoadingImage" runat="server" ImageUrl="~/RadControls/Ajax/Skins/Default/loading3.gif" BorderWidth="0px" AlternateText="Loading"></asp:Image> 
        
                              </telerik:RadAjaxLoadingPanel>                 
        
                           </telerik:RadPane> 
        
                        </telerik:RadSplitter> 
        
                     </div> 
        
                     <asp:SiteMapDataSource ID="ApplicationSiteMap" runat="server" SiteMapProvider="DefaultSiteMapProvider" 
        
                        ShowStartingNode="False" /> 
        
                     <div id="Div1">  
        
                        <table width="100%">  
        
                           <tr> 
        
                              <td style="width: 50%; height: 21px;">  
        
                                 <div id="copyright">  
        
                                 </div> 
        
                              </td> 
        
                              <td style="width: 50%; height: 21px;">  
        
                                 <div id="buildversion">  
        
                                    Build:  
        
                                    <asp:Label runat="server" ID="AppVersion" /></div>  
        
                              </td> 
        
                           </tr> 
        
                        </table> 
        
                     </div> 
        
                  </div> 
        
               </div> 
        
               </form> 
        
            </body> 
        
            </html>

    
                    if (!this.IsPostBack)  
        
                    {  
        
                        // QuickLinksDropdown  
        
                        //RadToolBarQuickLinks  
        
                        RadToolBarDropDown newnewDropButton = new RadToolBarDropDown();  
        
                        newDropButton.ImageUrl = "~/App_Themes/Default/Images/link.png";  
        
                        newDropButton.ToolTip = "Quick Links";  
        
                        newDropButton.Width = Unit.Pixel(20);  
        
                        RadToolBarButton newnewToolBar = new RadToolBarButton("Google");  
        
                        newToolBar.NavigateUrl = "http://www.google.com";  
        
                        newToolBar.Target = "_blank";  
        
                        newDropButton.Buttons.Add(newToolBar);  
        
                        QuickLinksToolbar.Items.Add(newDropButton);  
        
                    }

Erjan Gavalji
Admin

1455 posts
Posted 22 Apr 2008 Link to this post

Hi again Patrick,

I just created a page with the HTML you sent me, but I was not able to reproduce the problem. Please, find my test page attached.

Can you please, complete it so that it demonstrates the problem? It could be that some CSS definition causes the problem...

Kind regards,
Erjan Gavalji
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

WrongDropDownPositionTest.zip
Patrick Stovall

22 posts

Member since:
Jan 2008

Posted 22 Apr 2008 Link to this post

The only thing different that we are using and the code you provided is that we are using Office2007 theme that was provided by Telerik. I don't see any other differences at this point.

Were there changes in the Office 2007 theme between the last beta release and the final release?
Erjan Gavalji
Admin

1455 posts

Posted 23 Apr 2008 Link to this post

Hi Patrick,

I set the Skin property of the toolbars on the master page to Office2007 and I still was not able to get the problem. Could it be that the stylesheet you use interferes with the RadToolBar skin? You can identify if this is the problem by commenting the <link> tag.

Kind regards,
Erjan Gavalji
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

RadToolBarSplitButton

Patrick Stovall

Erjan Gavalji

Patrick Stovall

Erjan Gavalji

Patrick Stovall

Erjan Gavalji