How to align ASPxMenu items on both left and right-hand side

Download the code: Right-aligned menu.zip

As mentioned recently, we are making extensive use of DevExpress controls in my new job.

Today I needed to align menu items on the DevExpress menu to both sides of the screen. In case you wonder why, I’ll give one example: We use the menu as a toolbar in various places above an ASPxGridView, so it looks like it belongs to the grid. We then have menu items for actionable grid items on the left, and menu items to invoke the field editor and export functionality, which I felt could go on the right, for consistency across all pages. That is, the same two buttons occur on the top right toolbar above every grid, so it becomes a standard part of the application.

I found a solution posted on the component writers’ forum here, but unfortunately that doesn’t work anymore. All I’ve done is update it, using the same concept as before, such that it works with the more recent component and browser versions.

Here’s what it looks like at runtime:

RightAlignedMenu

Implementation

Here is my markup. The way to get this right is to use two menus, side by side, where each uses CSS to float to the left and right respectively. That’s exactly what the original solution did, except that it now gets rendered on two lines. All I did was to put the two menus into two table cells.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxMenu" TagPrefix="dx" %>
<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div style="border-color: #8BA0BC; border-style: solid; border-width: 1px; background-image: url('Images/MenuGB.png'); background-repeat: repeat-x;">
            <table style="width: 100%; border-collapse: collapse;">
                <tr>
                    <td style="float: left;">
                        <dx:ASPxMenu ID="devxMainMenuLeft" runat="server" EnableClientSideAPI="True" ClientInstanceName="mainMenu"
                            ShowAsToolbar="True" RenderMode="Lightweight" Border-BorderStyle="None" Theme="Office2010Blue">
                            <Items>
                                <dx:MenuItem Name="ShowTotalsMenuItem" Text="test1" ToolTip="Show Totals." BeginGroup="true"
                                    Checked="false">
                                </dx:MenuItem>
                                <dx:MenuItem Name="ShowGraphMenuItem" Text="test2" ToolTip="Hide Graph." BeginGroup="true"
                                    Checked="true">
                                </dx:MenuItem>
                                <dx:MenuItem Name="ShowLabelsMenuItem" Text="test3" ToolTip="Show Graph Labels."
                                    Checked="false">
                                </dx:MenuItem>
                                <dx:MenuItem Name="FiscalCalendarMenuItem" Text="test4" ToolTip="Show Fiscal Dimension.">
                                </dx:MenuItem>
                                <dx:MenuItem Name="SaveToExcelMenuItem" Text="test5" ToolTip="Save To Excel" BeginGroup="true"
                                    ClientEnabled="true">
                                </dx:MenuItem>
                                <dx:MenuItem Name="SaveToTextMenuItem" Text="test6" ToolTip="Save To Text" ClientEnabled="true">
                                </dx:MenuItem>
                            </Items>
                            <Border BorderStyle="None" />
                        </dx:ASPxMenu>
                    </td>
                    <td style="float: right">
                        <dx:ASPxMenu ID="devxMainMenuRight" runat="server" EnableClientSideAPI="True" ClientInstanceName="mainMenu"
                            ShowAsToolbar="True" HorizontalAlign="Right" RenderMode="Lightweight" Border-BorderStyle="None" Theme="Office2010Blue">
                            <Items>
                                <dx:MenuItem BeginGroup="True" Name="ResetLayout" Text="test7">
                                </dx:MenuItem>
                                <dx:MenuItem Name="Info" Text="Info">
                                </dx:MenuItem>
                            </Items>
                            <Border BorderStyle="None" />
                        </dx:ASPxMenu>
                    </td>
                </tr>
            </table>
            <div style="clear: both">
            </div>
        </div>
    </form>
</body>
</html>

Note that I had to use some minor trickery to make it look decent… And now it is no longer properly themed. I couldn’t rely on the menus’ borders, since they are rendered on the left and right respectively, but not in the middle. Thus I turned off the menus’ borders, and used the enclosing div to set the border instead. I also used a one-pixel wide image as the div background colour so that it matches the menus’ gradient background.

Advertisements

About Jerome

I am a senior C# developer in Johannesburg, South Africa. I am also a recovering addict, who spent nearly eight years using methamphetamine. I write on my recovery blog about my lessons learned and sometimes give advice to others who have made similar mistakes, often from my viewpoint as an atheist, and I also write some C# programming articles on my programming blog.
This entry was posted in Programming and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s