RadToolBar Button Positioning

4 posts, 0 answers
  1. Christopher Wooten
    Christopher Wooten avatar
    4 posts
    Member since:
    May 2010

    Posted 11 May 2010 Link to this post

    Hey there,

    I have a series of buttons and drop downs that I'd like to show in the header of my RadGrid using the CommandItemTemplate.  My first attempt at solving this problem involved using the RadToolBar.  This works well, except I have not been able to identify a way to position the buttons as I'd like.  Essentially, I want to be able to have the last button in the ToolBar aligned to the right.

    Is there a way to use an HTML table to position the RadToolBar's Items as I'd like?  

    Using standard ASP.Net controls, the essential layout I'd want can be created like this:

    <table style="width: 100%"
          <tr> 
               <td> 
                    <asp:DropDownList ID="SentBoxSelect" runat="server" CssClass="Normal" AutoPostBack="true" OnSelectedIndexChanged="SentBoxSelect_SelectedIndexChanged"
                       <asp:ListItem Text="All" Value="All" /> 
                       <asp:ListItem Text="None" Value="None" /> 
                     </asp:DropDownList> 
                     <asp:Button ID="btnReplySent" runat="server" CssClass="Normal" Text="Reply" /> 
                   </td> 
                   <td style="text-align: right"><asp:Button ID="SentTools" runat="server" CssClass="Normal" Text="Tools & Settings" OnClick="ToolsAndSettingsButton_Click" /></td
              </tr> 
    </table> 

    This results in a DropDownList on and a Button on the left side of the Grid's Header, and a "Tools & Settings" button aligned on the right side.

    Thanks for your help,

    Chris
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 14 May 2010 Link to this post

    Hi Christopher Wooten,

    You just need to set OuterCssClass property of the needed button and add the following css styles to your page:

    <style type="text/css">
        div.RadToolBar .rtbUL { width: 100%; }
        div.RadToolBar .rightButton  {
            float: right;
        }
    </style>

    <telerik:RadToolBar ID="RadToolBar1" runat="server" Width="100%">
        <Items>
            <telerik:RadToolBarButton Text="button1" OuterCssClass="rightButton" />
            <telerik:RadToolBarButton Text="button2" />
            <telerik:RadToolBarButton Text="button3" />
        </Items>
    </telerik:RadToolBar>


    All the best,
    Yana
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Somnath
    Somnath avatar
    43 posts
    Member since:
    Jun 2012

    Posted 26 Mar 2012 Link to this post

    It works for first button if we tried for the last button it goes outside of RadToolBar.
    Please suggest for the same.
    <telerik:RadPane ID="rpToolBar" runat="server" Scrolling="none" Height="30px">
                                                   <telerik:RadToolBar ID="RadToolBar1" runat="server" Width="100%" OnClientButtonClicked="onToolBarClientButtonClicking">
                                                       <Items>
                                                           <telerik:RadToolBarButton Text="<%$ Resources:NewSQColumn %>" CommandName="NewSQColumn"
                                                               ImageUrl="~/Images/NewSQColumn.png">
                                                           </telerik:RadToolBarButton>
                                                           <telerik:RadToolBarSplitButton EnableDefaultButton="false" Text="<%$ Resources:NewStarQuery %>"
                                                               ImageUrl="~/Images/NewSQColumn.png">
                                                               <Buttons>
                                                                   <telerik:RadToolBarButton Text="" CommandName="NewSQColumn0">
                                                                   </telerik:RadToolBarButton>
                                                                   <telerik:RadToolBarButton Text="" CommandName="NewSQColumn1">
                                                                   </telerik:RadToolBarButton>
                                                                   <telerik:RadToolBarButton Text="" CommandName="NewSQColumn2">
                                                                   </telerik:RadToolBarButton>
                                                               </Buttons>
                                                           </telerik:RadToolBarSplitButton>
                                                           <telerik:RadToolBarButton Text="<%$ Resources:NewExpressionColumn %>" CommandName="NewExpressionColumn"
                                                               ImageUrl="~/Images/ExpressionColumn.png">
                                                           </telerik:RadToolBarButton>
                                                           <telerik:RadToolBarSplitButton EnableDefaultButton="false" Text="<%$ Resources:NewExpression %>"
                                                               ImageUrl="~/Images/ExpressionColumn.png">
                                                               <Buttons>
                                                                   <telerik:RadToolBarButton Text="" CommandName="NewExpressionColumn0">
                                                                   </telerik:RadToolBarButton>
                                                                   <telerik:RadToolBarButton Text="" CommandName="NewExpressionColumn1">
                                                                   </telerik:RadToolBarButton>
                                                                   <telerik:RadToolBarButton Text="" CommandName="NewExpressionColumn2">
                                                                   </telerik:RadToolBarButton>
                                                               </Buttons>
                                                           </telerik:RadToolBarSplitButton>
                                                           <telerik:RadToolBarButton Text="<%$ Resources:radVariables %>" CommandName="Variables"
                                                               ImageUrl="~/Images/Variables.gif" Enabled="false">
                                                           </telerik:RadToolBarButton>
                                                           <telerik:RadToolBarButton Text="<%$ Resources:SQLQuery %>" CommandName="Query" ImageUrl="~/Images/SQLQuery.png"
                                                               Enabled="false">
                                                           </telerik:RadToolBarButton>
                                                           <telerik:RadToolBarSplitButton EnableDefaultButton="false" Text="<%$ Resources:Refresh %>"
                                                               ImageUrl="../Images/reload.png" CommandName="RefreshPreview" >
                                                               <Buttons>
                                                                   <telerik:RadToolBarButton Text="<%$ Resources:AutoRefresh %>" CommandName="AutoRefreshOnOff"
                                                                       ImageUrl="../Images/Success.gif" CssClass="CustomItem">
                                                                   </telerik:RadToolBarButton>
                                                               </Buttons>
                                                           </telerik:RadToolBarSplitButton>
                                                           <telerik:RadToolBarButton  Text="Hello" OuterCssClass="rightButton"
                                                              >                                                        
                                                           </telerik:RadToolBarButton>
                                                       </Items>
                                                   </telerik:RadToolBar>
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 29 Mar 2012 Link to this post

    Hello Ankit,

    The issue that I noticed when applying OuterCssClass="rightButton" to the last button was that it falls to the next row. However, by using the below css styles you can easily get the correct appearance:
    <style type="text/css">
            div.RadToolBar .rtbUL
            {
                width: 100%;
                white-space: normal;
            }
            div.RadToolBar .rightButton
            {
                float: right;
            }
        </style>

    markup:
    ... <telerik:RadToolBarButton Text="Hello" OuterCssClass="rightButton">
                    </telerik:RadToolBarButton>
    ...

    Regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top