Telerik RadToolBar provides a set of client-side events. A client-event is essentially a string which specifies the JavaScript function to execute when the event is fired. The function may receive different numbers of parameters. Some of the events can be cancelled. To cancel a "before" event, simply return false from your javascript event-handler function.
|
Event |
Description |
|
OnClientMouseOver |
This event is fired when the mouse is over a button.
|
|
OnClientMouseOut |
This event is fired when the mouse is out of a button. |
|
OnClientClick |
This event is fired when the mouse clicks on a button.
 |
This event can be canceled. | |
|
OnClientMouseDown |
This event is fired when the mouse button is down on clicking on a button. |
|
OnClientButtonToggled |
This event is fired when a button is toggled. |
|
OnClientOrientationChanged |
This event is fired when the orientation of the toolbar is changed. |
| Example |
 Copy Code |
|
<rad:radtoolbar runat="server" id="toolbar1" skin="macOS" UseFadeEffect="True">
<items>
<rad:radtoolbarbutton AccessKey="n" Tooltip="New (Alt+N)" CommandName="New" />
<rad:radtoolbarbutton AccessKey="o" Tooltip="Open (Alt+O)" CommandName="Open" />
<rad:radtoolbarbutton AccessKey="s" Tooltip="Save (Alt+S)" CommandName="Save" />
<rad:radtoolbarseparator />
<rad:radtoolbartogglebutton AccessKey="l" Tooltip="Align Left (Alt+L)" ButtonGroup="Alignment" CommandName="alignLeft" />
<rad:radtoolbartogglebutton AccessKey="e" Tooltip="Align Center (Alt+E)" ButtonGroup="Alignment" CommandName="Center" />
<rad:radtoolbartogglebutton AccessKey="r" Tooltip="Align Right (Alt+R)" ButtonGroup="Alignment" CommandName="alignRight" />
<rad:radtoolbartogglebutton AccessKey="j" Tooltip="Justify (Alt+J)" ButtonGroup="Alignment" CommandName="Justify" />
</items>
</rad:radtoolbar>
<script type="text/javascript">
<!--
<%= toolbar1.ClientID %>.attachEvent("OnClientMouseOver","mover_handler");
<%= toolbar1.ClientID %>.attachEvent("OnClientMouseOut","mout_handler");
<%= toolbar1.ClientID %>.attachEvent("OnClientClick","click_handler");
<%= toolbar1.ClientID %>.attachEvent("OnClientMouseDown","mdown_handler");
<%= toolbar1.ClientID %>.attachEvent("OnClientButtonToggled","toggle_handler");
<%= toolbar1.ClientID %>.attachEvent("OnClientOrientationChanged","orientation_handler");
function orientation_handler(sender, orientation)
{
var event_log = document.getElementById("event_log");
event_log.innerHTML = "<b>" + sender.ClientID + "</b> fired: <span style='color: purple;'>Orientation Changed: " + orientation +"</span><br/>" + event_log.innerHTML;
}
function toggle_handler(sender, state)
{
var event_log = document.getElementById("event_log");
event_log.innerHTML = "<b>" + sender.CommandName + "(Group:" + sender.ButtonGroup +")</b>:<span style='color: maroon;'> toggled: "+state+"</span><br/>" + event_log.innerHTML;
}
function mdown_handler(sender, e)
{
var event_log = document.getElementById("event_log");
event_log.innerHTML = "<b>" + sender.CommandName + "</b> fired: <span style='color: orange;'>OnMouseDown</span><br/>" + event_log.innerHTML;
}
function mover_handler(sender, e)
{
var event_log = document.getElementById("event_log");
event_log.innerHTML = "<b>" + sender.CommandName + "</b> fired: <span style='color: green;'>OnMouseOver</span><br/>" + event_log.innerHTML;
}
function mout_handler(sender, e)
{
var event_log = document.getElementById("event_log");
event_log.innerHTML = "<b>" + sender.CommandName + "</b> fired: <span style='color: red;'>OnMouseOut</span><br/>" + event_log.innerHTML;
}
function click_handler(sender, e)
{
var event_log = document.getElementById("event_log");
event_log.innerHTML = "<b>" + sender.CommandName + "</b> fired: <span style='color: blue;'>onClick</span><br/>" + event_log.innerHTML;
}
-->
</script> |
|
Note that the events must be registered after the declaration of the toolbar. |