Edit this page

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) {

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))        

Using disable() method

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

Using enable() method

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

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);
var dropDownChildButton = new Telerik.Web.UI.RadToolBarButton();
dropDownChildButton.set_text("Added on the client-side button");

See Also