ToolBar / Add/Remove/Disable Items

With RadToolBar 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 RadToolBarItems, or add/remove buttons to/from the Buttons Collections of the RadToolBarDropDown and RadToolBarSplitButton.

To add an item (a button, dropdown or a split button ) to the Items Collection of the toolbar:

var toolBar = $find("<%= RadToolBar1.ClientID %>");

//Creates a new item to be added to the toolbar's Items Collection. The line below creates a dropdown
var newDropDown = new Telerik.Web.UI.RadToolBarDropDown();
newDropDown.set_text("Added client-side");
//Adds the dropdown to the Items Collection of the toolbar
toolBar.get_items().add(newDropDown);

To remove an item from the toolbar's Items Collection

var toolBar = $find("<%= RadToolBar1.ClientID %>");
if (toolBar.get_items().get_count() > 0)
    //Removes the last item from the toolbar's Items Collection
    toolBar.get_items().removeAt(toolBar.get_items().get_count() - 1);

To disable a toolbar item

var toolBar = $find("<%= RadToolBar1.ClientID %>");
//Gets the last item in the toolbar's Items Collection
var lastItem = toolBar.get_items().getItem(toolBar.get_items().get_count()-1);
//Disables the last item
lastItem.set_enabled(false);

A similar approach is used to add/remove/disable buttons in the Buttons Collections of the RadToolBarDropDown or RadToolBarSplitButton.
You can review the code sections of this example for more details.

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

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

var toolBar = $find("RadToolBar1");
toolBar.trackChanges();
//add, remove, disable items
toolBar.commitChanges();

foreach (ClientOperation<RadToolBarItem> operation in RadToolBar1.ClientChanges)
{
	RadToolBarItem item = operation.Item;

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