Click a top-level item to enable/disable its submenu items.
<%@ Register TagPrefix="ec" Namespace="ASPNETExpert.WebControls" Assembly="ASPNETExpert.WebControls" %>
<%@ Register TagPrefix="ecd" TagName="Footer" Src="../../Controls/Footer.ascx"%>
<%@ Register TagPrefix="ecd" TagName="Header" Src="../../Controls/Header.ascx"%>
<%@ Register TagPrefix="ecd" Namespace="ASPNETExpert.WebControls.DemoControls" Assembly="ASPNETExpert.WebControls.DemoControls" %>
<%@ Page %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>ASP.NET Menu : ExpertMenu Demo : Client-side Enable/Disable</title>
<link href="../../style.css" type="text/css" rel="stylesheet">
<script language=javascript>
function ToggleItem()
{
var itemId = document.getElementById('itemToDisable').value;
var menuItem = ec_GetMenu('<%=ExpertMenu1.UniqueID%>').FindById(itemId, true);
if(menuItem)
menuItem.SetEnabled(!menuItem.Enabled());
else
alert('The item with Id=' + itemId + ' is not found');
}
function ToggleItems(value)
{
ToggleItemList(ec_GetMenu('<%=ExpertMenu1.UniqueID%>').GetItemsByValue(value, true));
}
function ToggleItemsRegExp(pattern, flags)
{
ToggleItemList(ec_GetMenu('<%=ExpertMenu1.UniqueID%>').GetItemsByValuePattern(pattern, flags, true));
}
function ToggleItemList(itemList)
{
for(var i in itemList)
itemList[i].SetEnabled(!itemList[i].Enabled());
}
</script>
</HEAD>
<body xmlns:ec="urn:http://aspnetexpert.com/ExpertControls.xsd">
<form id="Form1" method="post" runat="server">
<ecd:Header runat="server" ID="Header1"></ecd:Header>
<div class="prompt" style="margin-top:0px;">Click a top-level item to enable/disable its submenu items.</div>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<ec:ExpertMenu runat="server" id="ExpertMenu1" Skin="Gray" PostBackOnClick="true" EnableViewState="false">
<TopGroup Look-Orientation="Horizontal">
<Items>
<ec:MenuItem Text="File" PostBackOnClick="false" OnClientAfter-Click="ToggleItems('File')">
<SubMenu>
<Items>
<ec:MenuItem Text="New" Id="New" NavigateUrl="default.aspx?action=New" Value="File">
<SubMenu>
<Items>
<ec:MenuItem Text="Project" Id="NewProject" Value="File" NavigateUrl="default.aspx?action=NewProject" />
<ec:MenuItem Text="File" Id="NewFile" Value="File" NavigateUrl="default.aspx?action=NewFile" />
</Items>
</SubMenu>
</ec:MenuItem>
<ec:MenuItem Text="Open" Id="Open" Value="File" NavigateUrl="default.aspx?action=open">
<SubMenu>
<Items>
<ec:MenuItem Text="File" Id="OpenFile" Value="File" NavigateUrl="default.aspx?action=OpenFile" />
<ec:MenuItem Text="File From Web" Id="OpenWebFile" Value="File" NavigateUrl="default.aspx?action=OpenWebFile" />
</Items>
</SubMenu>
</ec:MenuItem>
<ec:MenuItem Text="Save" Id="Save" Value="File" NavigateUrl="default.aspx?action=Save" />
<ec:MenuItem Text="Save As..." Id="SaveAs" Value="File" NavigateUrl="default.aspx?action=SaveAs" />
</Items>
</SubMenu>
</ec:MenuItem>
<ec:MenuItem Text="Edit" PostBackOnClick="false" OnClientAfter-Click="ToggleItemsRegExp('^edit-', 'gi')">
<SubMenu>
<Items>
<ec:MenuItem Text="Cut" Value="Edit-Cut" />
<ec:MenuItem Text="Copy" Value="Edit-Copy" />
<ec:MenuItem Text="Paste" Value="Edit-Paste" />
<ec:MenuItem Text="Find and Replace" Value="Edit-FindReplace">
<SubMenu>
<Items>
<ec:MenuItem Text="Find" Value="Edit-Find" />
<ec:MenuItem Text="Replace" Value="Edit-Replace" />
<ec:MenuItem Text="Find Symbol" Value="Edit-FindSymbol" />
</Items>
</SubMenu>
</ec:MenuItem>
</Items>
</SubMenu>
</ec:MenuItem>
<ec:MenuItem Text="View" PostBackOnClick="false" OnClientAfter-Click="ToggleItems('View')">
<SubMenu>
<Items>
<ec:MenuItem Text="Open" Value="View" />
<ec:MenuItem Text="Open With" Value="View" />
</Items>
</SubMenu>
</ec:MenuItem>
<ec:MenuItem Text="Project" PostBackOnClick="false" OnClientAfter-Click="ToggleItems('Project')">
<SubMenu>
<Items>
<ec:MenuItem Text="Copy Project..." Value="Project" />
<ec:MenuItem Text="Exclude From Project" Value="Project" />
<ec:MenuItem Text="Show All Files" Value="Project" />
</Items>
</SubMenu>
</ec:MenuItem>
</Items>
</TopGroup>
</ec:ExpertMenu>
</td>
</tr>
<tr>
<td style="PADDING-TOP:8px">
<ec:ExpertPath runat="server" ExpertMenuId="ExpertMenu1" ID="ExpertMenuPath1" EnableViewState="false">
<ItemLook>
<InitLook ForeColor="Gray" Font-Name="Verdana,Arial,Helvetica,sans-serif" Font-Size="10px" Font-Bold="True" Padding-All="2px" Cursor="Pointer" />
<HoveredLook ForeColor="#5B73A6" Font-Name="Verdana,Arial,Helvetica,sans-serif" Font-Size="10px" Font-Bold="True" Font-Decoration="Underline" Cursor="Pointer" />
<DisabledLook ForeColor="Silver" />
</ItemLook>
<SeparatorTextLook ForeColor="Gray" Font-Name="Verdana,Arial,Helvetica,sans-serif" Font-Size="10px" Font-Bold="True" Padding-Left="4px" Padding-Right="4px" />
</ec:ExpertPath></td>
</tr>
</table>
<table cellpadding="2" cellspacing="0" border="0">
<tr>
<td class="formtext">Enter item Id:</td>
<td><input type="text" id="itemToDisable" value="SaveAs"></td>
<td><input type=button value="Enable / Disable Item" onclick="ToggleItem()"></td>
</tr>
</table>
<br>
<ecd:DescriptionView runat="server" IconUrl="../../images/kv.gif" ID="Descriptionview1">
<ecd:Description runat="server" ID="Description1">This example demonstrates client-side API to
<b>Enable / Disable</b> menu items.</ecd:Description>
<ecd:Description runat="server" ID="Description2">It also demonstrates <b>FindById(), GetItemsByValue(),
GetItemsByValuePattern</b> methods.</ecd:Description>
<ecd:Description runat="server" ID="Description3"><b>Note</b>, that dependant <b>ExpertPath</b> is synchronized with its
parent menu.</ecd:Description>
</ecd:DescriptionView>
<ec:CodeViewTab id="CodeViewTab1" runat="server" ImagesBaseUrl="../../images/tab/">
<ec:TabItem runat="server" Text="aspx">
<pre class="aspcode">
<ecd:SyntaxHighlight runat="server" ContentType="ASPX" OutputFile="default.aspx" />
</pre>
</ec:TabItem>
</ec:CodeViewTab>
<ecd:Footer runat="server" ID="Footer1"></ecd:Footer>
</form>
</body>
</HTML>