MultiColumnSubmenu

Overview

Since 3.1

The multi-column submenu defines a submenu with multiple columns, defined by <ace:menuColumn>. It can be nested inside <ace:menuBar>, <ace:contextMenu>, and <ace:menu> in fly-out mode (tiered, non-sliding).

See the ICEfaces Showcase Live Demo of this component, complete with source code.

Getting Started

Like the regular submenu, the multi-column submenu needs a label.

<ace:dataExporter type="csv" target="myTable" fileName="tableData"/>

<ace:menuBar id="menubar" autoSubmenuDisplay="true">
        <ace:multiColumnSubmenu label="Multi 1">
                <ace:menuColumn width="200">
                    <ace:submenu label="Submenu 1.1">
                        <ace:menuItem value="Item 1.1.1">
                            <ace:ajax event="activate" execute="@this" render="@form" />
                        </ace:menuItem>
                        <ace:menuItem value="Item 1.1.2">
                            <ace:ajax event="activate" execute="@this" render="@form" />
                        </ace:menuItem>
                    </ace:submenu>
                    <ace:submenu label="Submenu 1.2">
                        <ace:menuItem value="Item 1.2.1">
                            <ace:ajax event="activate" execute="@this" render="@form" />
                        </ace:menuItem>
                        <ace:menuItem value="Item 1.2.2">
                            <ace:ajax event="activate" execute="@this" render="@form" />
                        </ace:menuItem>
                        <ace:menuItem value="Item 1.2.3">
                            <ace:ajax event="activate" execute="@this" render="@form" />
                        </ace:menuItem>
                    </ace:submenu>
                </ace:menuColumn>
                <ace:menuColumn>
                    <ace:submenu label="Submenu 1.3">
                        <ace:menuItem value="Item 1.3.1">
                            <ace:ajax event="activate" execute="@this" render="@form" />
                        </ace:menuItem>
                        <ace:menuItem value="Item 1.3.2">
                            <ace:ajax event="activate" execute="@this" render="@form" />
                        </ace:menuItem>
                        <ace:menuItem value="Item 1.3.3">
                            <ace:ajax event="activate" execute="@this" render="@form" />
                        </ace:menuItem>
                        <ace:menuItem value="Item 1.3.4">
                            <ace:ajax event="activate" execute="@this" render="@form" />
                        </ace:menuItem>
                        <ace:menuItem value="Item 1.3.5">
                            <ace:ajax event="activate" execute="@this" render="@form" />
                        </ace:menuItem>
                    </ace:submenu>
                </ace:menuColumn>
        </ace:multiColumnSubmenu>
</ace:menuBar>

Attributes

TagLib Documentation
This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available here.

label Sets the label of the submenu.

icon Sets the CSS class name that contains the styling to display an icon.

disabled Disables/enables the submenu.

positionTop Specifies a 'top' position (in pixels) that will override the automatic positioning of the submenu. This value is relative to the 'top' position of the submenu label or of the menu bar (see 'relativeTo' attribute). A negative value means that this custom position is above the reference point, while and positive value means that this custom position is below.

positionLeft Specifies a 'left' position (in pixels) that will override the automatic positioning of the submenu. This value is relative to the 'left' position of the submenu label or of the menu bar (see 'relativeTo' attribute). A negative value means that this custom position is to the left the reference point, while and positive value means that this custom position is to the right.

relativeTo Specifies whether the 'positionLeft' and 'positionRight' attributes are relative to the submenu label or the menu bar. It also affects centering when using the value 'center' in 'direction. Possible values are 'label' and 'menubar'. The default value is 'label'.

Client Behavior Events

None.

JavaScript APIs

Not applicable.

Keyboard and ARIA Support

The following ARIA roles are supported: menuitem.

CSS Classes

The following markup represents the basic HTML structure of the component and the CSS classes it uses.

<!-- Root container (inside ace:menuBar or ace:contextMenu) -->
<li class="ui-widget wijmo-wijmenu-item ui-state-default ui-corner-all wijmo-wijmenu-parent">
	<!-- Label in menu bar -->
	<a class="wijmo-wijmenu-link ui-corner-all ui-state-active">
		<span class="wijmo-wijmenu-text">
			<span class="wijmo-wijmenu-text [user defined classes]" style="[user defined styles]">Multi-column submenu title</span>
		</span>
		<span class="ui-icon ui-icon-triangle-1-s"></span>
	</a>
	<!-- Multi-column submenu container -->
	<div class="wijmo-wijmenu ui-menu-multicolumn wijmo-wijmenu-list ui-widget-content ui-corner-all ui-helper-clearfix wijmo-wijmenu-child wijmo-wijmenu-flyout">
		<div class="ui-menu-multicolumn-header"><div></div></div>
		<div>
			<ul>
				<!-- Submenu -->
				<li class="ui-widget-header ui-corner-all"><h3>Submenu title</h3></li>
				<!-- Menu item -->
				<li class="ui-widget wijmo-wijmenu-item ui-state-default ui-corner-all">
					<a class="wijmo-wijmenu-link ui-corner-all">
						<span class="wijmo-wijmenu-text">
							<span class="wijmo-wijmenu-text">Menu item title</span>
						</span>
					</a>
				</li>
			</ul>
		</div>
		<div class="ui-menu-multicolumn-footer"><div></div></div>
	</div>
</li>

Known Issues