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

RadToolBarSplitButton

5 Answers 254 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Patrick Stovall
Top achievements
Rank 1
Patrick Stovall asked on 21 Apr 2008, 06:31 PM
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?

5 Answers, 1 is accepted

Sort by
0
Erjan Gavalji
Telerik team
answered on 22 Apr 2008, 08:09 AM
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
0
Patrick Stovall
Top achievements
Rank 1
answered on 22 Apr 2008, 01:09 PM
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);  
        } 
0
Erjan Gavalji
Telerik team
answered on 22 Apr 2008, 04:35 PM
WrongDropDownPositionTest.zip
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
0
Patrick Stovall
Top achievements
Rank 1
answered on 22 Apr 2008, 04:49 PM
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?
0
Erjan Gavalji
Telerik team
answered on 23 Apr 2008, 08:19 AM
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
Tags
ToolBar
Asked by
Patrick Stovall
Top achievements
Rank 1
Answers by
Erjan Gavalji
Telerik team
Patrick Stovall
Top achievements
Rank 1
Share this question
or