ASPxMenu.HorizontalAlign Property
Gets or sets the horizontal alignment of menu items.
Namespace: DevExpress.Web
Assembly: DevExpress.Web.v18.2.dll
Declaration
[DefaultValue(HorizontalAlign.NotSet)]
public HorizontalAlign HorizontalAlign { get; set; }Property Value
| Type | Default | Description |
|---|---|---|
| HorizontalAlign | **NotSet** | One of the HorizontalAlign enumeration values. |
Remarks
If a menu control’s Width property is defined and the ASPxMenu.ItemAutoWidth property is set to false, the HorizontalAlign property can be used to specify the horizontal alignment of menu items.
Example
This example demonstrates the use of the client SetPopupElementID method. This method allows you to programmatically specify the element whose specific mouse action (defined via the PopupAction property) invokes a popup window or popup menu.In this example, the grid's last column displays image elements, which being hovered, invoke a popup menu, allowing you to manipulate the corresponding grid row (select, unselect or edit the row). The popup menu is associated with the required image element using the menu's SetPopupElementID method.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/aspxpopupcontrol-aspxpopupmenu-using-setpopupelementid-method-to-change-popup-element-e1991
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="SwitchPopupElement._Default" %>
<%@ Register Assembly="DevExpress.Web.v10.1" Namespace="DevExpress.Web.ASPxMenu" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.ASPxGridView.v10.1" Namespace="DevExpress.Web.ASPxGridView" 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>SwitchPopupElement</title>
<script type = "text/javascript">
var currentRowKey = 0;
function OnMouseOver(element, keyValue) {
currentRowKey = keyValue;
element.id = "popupElement" + keyValue;
ClientPopupMenu.SetPopupElementID(element.id);
ClientPopupMenu.Show();
}
function EditCurrentRow() {
ClientGridView.StartEditRowByKey(currentRowKey);
}
function SelectCurrentRow() {
ClientGridView.SelectRowsByKey(currentRowKey, true);
}
function UnselectCurrentRow() {
ClientGridView.SelectRowsByKey(currentRowKey, false);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<dx:ASPxPopupMenu ID = "ASPxPopupMenu" runat = "server" ClientInstanceName = "ClientPopupMenu"
PopupAction = "LeftMouseClick" CloseAction = "MouseOut"
PopupHorizontalAlign = "OutsideRight" PopupVerticalAlign = "TopSides">
<Items>
<dx:MenuItem Text="Edit" Name="editMenuItem"/>
<dx:MenuItem Text="Select" Name="selectMenuItem"/>
<dx:MenuItem Text="Unselect" Name="unselectMenuItem"/>
</Items>
<ClientSideEvents ItemClick="function(s, e) {
if(e.item.name == 'editMenuItem')
EditCurrentRow();
else if (e.item.name == 'selectMenuItem')
SelectCurrentRow();
else if (e.item.name == 'unselectMenuItem')
UnselectCurrentRow();
}" />
</dx:ASPxPopupMenu>
<div style ="width:100%" >
<dx:ASPxGridView ID="ASPxGridView" ClientInstanceName="ClientGridView" runat="server"
DataSourceID="AccessDataSource" KeyFieldName="CustomerID" Width="50%" >
<Columns>
<dx:GridViewDataColumn FieldName="ContactName" VisibleIndex="1"/>
<dx:GridViewDataColumn FieldName="CompanyName" VisibleIndex="2"/>
<dx:GridViewDataColumn FieldName="City" VisibleIndex="3"/>
<dx:GridViewDataColumn FieldName="Region" VisibleIndex="4"/>
<dx:GridViewDataColumn FieldName="Country" VisibleIndex="5"/>
<dx:GridViewDataColumn Caption="" VisibleIndex="6" CellStyle-HorizontalAlign = "Center">
<DataItemTemplate>
<img src = "img/arrow.png" style="cursor:pointer;" alt = ""
onmouseover = "OnMouseOver(this, '<%# Container.KeyValue %>')"/>
</DataItemTemplate>
</dx:GridViewDataColumn>
</Columns>
<SettingsPager Mode="ShowPager" PageSize = "10"/>
<SettingsBehavior AllowMultiSelection="true" />
</dx:ASPxGridView>
</div>
<asp:AccessDataSource ID="AccessDataSource" runat="server" DataFile="~/App_Data/nwind.mdb"
SelectCommand="SELECT * FROM [Customers]"/>
</form>
</body>
</html>