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();
Client side changes are available on the server side after postback. You can use the
ClientChanges
property to access them:
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;
}
}