Client-side Programming Overview
RadToolBar provides a flexible client-side API. You can easily interact with the toolbar in the browser using the toolbar 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 RadToolBar client-side object
RadToolBar creates a client-side object with the ClientID of the toolbar. You can obtain the reference using the following JavaScript code:
var toolBar = $find("<%= RadToolBar1.ClientID %>");
Getting the instance of a particular RadToolBarItem
Once you have the client-side object of RadToolBar, you can use the findItemByText() method to get the instance of a particular item:
var toolBar = $find("<%= RadToolBar1.ClientID %>");
var item = toolBar.findItemByText(text);
The returned item can be a button, drop-down or a split button.
Cancelling an action
Several client side events occur immediately before the toolbar performs some action. Most of these events all have names that end in "-ing". You can use these events to cancel the toolbar action by using the set_cancel() method of the eventArgs passed to the handler:
function OnClientButtonClicking(sender, args) {
args.set_cancel(true);
}
Calling a client-side method
When you get the instance of the RadToolBar object, you can call client-side methods to perform certain tasks. Consider the following examples:
Using set_checked() method
var toolBar = $find("<%=RadToolBar1.ClientID %>");
var button = toolBar.findItemByText("Button1");
if (Telerik.Web.UI.RadToolBarButton.isInstanceOfType(button))
button.set_checked(!button.get_isChecked());
Using disable() method
var toolBar = $find("<%=RadToolBar1.ClientID %>");
var button = toolBar.findItemByText("Button1");
button.disable();
Using enable() method
var toolBar = $find("<%=RadToolBar1.ClientID %>");
var button = toolBar.findItemByText("Button1");
button.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:
var toolBar = $find("RadToolBar1");
var dropDownButton = toolBar.get_items().getItem(0);
toolBar.trackChanges();
var dropDownChildButton = new Telerik.Web.UI.RadToolBarButton();
dropDownChildButton.set_text("Added on the client-side button");
dropDownButton.get_buttons().add(dropDownChildButton);
toolBar.commitChanges();