RadToolBar Button Positioning

[Christopher Wooten]

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

[Yana]

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.

[Somnath]

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>

[Kate]

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