Menu / Add/Remove/Disable Items

With RadMenu for ASP.NET Ajax it is easy to add, remove or disable items at the client side. What is more, you can persist the changes after postback.

This example shows how to add/remove/disable items upon clicking on existing items.

In the OnClientItemClicked event:

• Two parameters are passed to this event
  - menu - the menu instance firing the event
  - args - event arguments
• To get the clicked item we used the event arguments passed to the event:

     var item = args.get_item();

• To add a new item to the root item:

     //Creates a new item

     var childItem = new Telerik.Web.UI.RadMenuItem(); 

     childItem.set_text("New" + item.get_text());

 

     //Adds the newly created item to the items collection of the clicked item's parent 

     item.get_parent().get_items().add(childItem); 

• To remove an existing item:  

     var parentItem = item.get_parent();
     //Removes the item from the items collection of the clicked item's parent 
     parentItem.get_items().remove(item); 

• To disable an existing item:

     item.disable(); 

• add(item)  - adds a new item
• remove(item) - remove an existing item
• item.disable() - disables an existing item
  

If you want to persist these changes after a postback the methods described below should be used:

• menu.trackChanges();  -indicates that client-side changes are going to be made and these changes are supposed to be persisted after postback.
• menu.commitChanges(); - submits the changes to the server.
  

        var menu = $find("Menu1");

	menu.trackChanges();

	//add, remove, disable items

	menu.commitChanges(); 

foreach (ClientOperation<RadMenuItem> operation in RadMenu1.ClientChanges)
{
	RadMenuItem item = operation.Item;

	switch (operation.Type)
	{
		case ClientOperationType.Insert:
			break;
		case ClientOperationType.Remove:
			break;
		case ClientOperationType.Update:
			UpdateClientOperation<RadMenuItem> update = operation as UpdateClientOperation<RadMenuItem>;
			break;
		case ClientOperationType.Clear:
			break;
	}	
}