Client-side Programming Overview
RadMenu provides a flexible client-side API. You can easily interact with the menu in the browser using the menu client-side object. In addition to a variety of client-side events, the client-side object model lets you achieve complicated tasks while avoiding unnecessary post-backs.
Getting the RadMenu client-side object
RadMenu creates a client-side object with the ClientID of the menu. You can obtain the reference using the following JavaScript code:
var menu = $find("<%= RadMenu1.ClientID %>");
Getting the instance of a particular RadMenuItem
Once you have the client-side object of RadMenu, you can use the findItemByText() method to get the instance of a particular item:
var menu= $find("<%= RadMenu1.ClientID %>");var item = menu.findItemByText(text);
Cancelling an action
Several client side events occur immediately before the menu performs some action. Most of these events all have names that end in "-ing". You can use these events to cancel the menu action by using the cancel property of the eventArgs passed to the handler:
function OnClientItemOpening(sender, eventArgs) {
eventArgs.set_cancel(true);
}
Calling a client-side method
When you get the instance of the RadMenu object, you can call client-side methods to perform certain tasks. Consider the following examples:
- open()
function openItem(text) {
var menu = $find("<%= RadMenu1.ClientID %>");
var item = menu.findItemByText(text);
if (item) {
item.open();
}
else {
alert("Item with text '" + text + "' not found.");
}
}
- close()
function CloseItem(text) {
var menu = $find("<%= RadMenu1.ClientID %>");
var item = menu.findItemByText(text);
if (item) {
item.close();
}
else {
alert("Item with text '" + text + "' not found.");
}
}
- disable()
function DisableItem(text) {
var menu = $find("<%= RadMenu1.ClientID %>");
var item = menu.findItemByText(text);
if (item) {
item.disable();
}
else {
alert("Item with text '" + text + "' not found.");
}
}
- enable()
function EnableAll() {
var menu = $find("<%= RadMenu1.ClientID %>");
for (var i = 0; i < menu.get_allItems().length; i++) {
menu.get_allItems()[i].enable();
}
}
Preserving Changes
By default, changes made in client-side code do not persist over a post-back to the server. To preserve changes, you must use the trackChanges and commitChanges methods:
function AddNewItem() {
var menu = $find("<%= RadMenu1.ClientID %>");
// items in Mobile render mode are of type MobileMenuItem while in other render modes it is RadMenuItem
var menuItemClass = Telerik.Web.UI.RadMenuItem || Telerik.Web.UI.MobileMenuItem;
var menuItem = new menuItemClass();
menuItem.set_text("New Item");
menu.trackChanges();
menu.get_items().add(menuItem);
menu.commitChanges();
}