New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial
Hide and Show the Menu on the Client
Here is an example of how to show/hide the menu and menu item client-side.
ASP.NET
<telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server">
<Items>
<telerik:RadMenuItem runat="server" Text="root 1">
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" Text="root 2">
<Items>
<telerik:RadMenuItem runat="server" Text="child 2.1">
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" Text="child 2.2">
</telerik:RadMenuItem>
</Items>
</telerik:RadMenuItem>
</Items>
</telerik:RadMenu>
<input id="Button1" onclick="hideMenuItem()" type="button" value="Hide Menu Item" />
<input id="Button2" onclick="showMenuItem()" type="button" value="Show Menu Item" />
<input id="Button3" onclick="showOrHideMenu()" type="button" value="Show/Hide Menu" />
JavaScript
function hideMenuItem() {
var menu = $find("<%=RadMenu1.ClientID %>");
menu.findItemByText("root 1").hide();
}
function showMenuItem() {
var menu = $find("<%=RadMenu1.ClientID %>");
menu.findItemByText("root 1").show();
}
function showOrHideMenu() {
var menu = $find("<%=RadMenu1.ClientID %>");
if (menu.get_element().style.display == "none") {
menu.get_element().style.display = "";
}
else {
menu.get_element().style.display = "none";
}
}
The above code hides the menu if it is visible or shows it if it is invisible by clicking on the Show/Hide Menu.
Clicking on the Hide Menu Item button will hide the "root 1" menu item. Respectively pressing the Show Menu Item button will show that menu item.