Much like the event handling exposed by the Document Object Model, the client-side menu object allows both singlecast and multicast event handler binding.
Singlecast event handling
Singlecast event handling is the simplest way to execute user code when an event occurs. It is done by a direct assignment:
| |
 Copy Code |
|
<script type="text/javascript">
function OnClientItemFocusHandler()
{
alert("item");
}
RadMenu1.OnClientItemFocus = OnClientItemFocusHandler;
</script> |
Multicast event handling
If you want multiple listeners to respond to a certain event, you should use multicast event handling.
The example below demonstrates how to bind multiple event handlers to the OnClientItemFocus event of the menu:
| |
Copy Code |
|
<script type="text/javascript">
function OnClientItemFocusHandler1()
{
alert( "first handler called");
}
function OnClientItemFocusHandler2()
{
alert( "second handler called");
}
RadMenu1.AttachEvent("OnClientItemFocus", OnClientItemFocusHandler1);
RadMenu1.AttachEvent("OnClientItemFocus", OnClientItemFocusHandler2);
</script> |
Another advantage of multicast event handlers is the possibility of detaching a certain handler dynamically. You may use the DetachEvent() method of the menu object. DetachEvent() will work only if AttachEvent() is used:
| |
Copy Code |
|
<input id="Button1" onclick="detatch()" type="button" value="button" />
<script type="text/javascript">
RadMenu1.AttachEvent( "OnClientMouseOver", mouseoverhandler);
function detatch()
{
RadMenu1.DetachEvent( "OnClientMouseOver", mouseoverhandler);
}
function mouseoverhandler()
{
alert("1");
}
</script> |
The code above will detach the OnClientMouseOver event when the button is clicked.
Formatting event handlers
To conform with the Document Object Model, we have exposed three available formats for event handler definition. These formats are supported both for singlecast and multicast event handling.
Function reference
First you define a function, then you pass a reference to it.
| |
Copy Code |
|
<script type="text/javascript">
function OnClientItemFocusHandler()
{
alert( "first handler called");
}
RadMenu1.OnClientItemFocus = OnClientItemFocusHandler;
</script> |
Function name (string)
First you define a function, then you pass its name as a string to the event.
| |
Copy Code |
|
<script type="text/javascript">
function OnClientItemFocusHandler()
{
alert( "first handler called");
}
RadMenu1.OnClientItemFocus = "OnClientItemFocusHandler";
</script> |
String containing executable code
Useful for simple scenarios. The string passed is evaluated when the event handler is called.
| |
Copy Code |
|
<script type="text/javascript">
RadMenu1.OnClientItemFocus = "alert('first handler called')";
</script> |
Cancelling an event
In general, the events named with an -ing suffix (OnClientItemClicking for instance) can be cancelled if you explicitly return False from a handler.
The example below shows how an item click can be cancelled.
To test whether the event is really being cancelled, you can use the following server-side code:
| C# |
Copy Code |
|
protected void RadMenu1_MenuItemClick(object sender, Telerik.WebControls.MenuEventArgs e)
{
TextBox1.Text = "Postback occured because the event wasn't cancelled.";
} |
In case the event is not cancelled, the page will perform postback. If the event is cancelled, the postback will not be performed.
The client-side JavaScript code is as follows:
| |
Copy Code |
|
<script type="text/javascript">
function OnClientItemClickingHandler(sender, EventArgs)
{
alert("You clicked " + EventArgs.Item.Text);
//Remove comments from the line below to disable postback:
//return false;
}
RadMenu1.OnClientItemClicking = "OnClientItemClickingHandler";
</script> |
Note that the return false statement is placed inside a comment. You can test whether the event is being cancelled by removing and replacing the comment.
Enabling and disabling events
If you want for some reason to temporarily "mute" the control event emitting (or, respectively, to "unmute" the events again), you may use the DisableEvents() and EnableEvents() methods. While the AttachEvent() and DetachEvent() methods are used to enable or disable a particular event, EnableEvent() and DisableEvent() affect all events at once.
| |
Copy Code |
|
<script type="text/javascript">
function OnClientItemClickingHandler(sender, EventArgs)
{
alert("You clicked " + EventArgs.Item.Text);
}
RadMenu1.DisableEvents();
RadMenu1.OnClientItemClicking = OnClientItemClickingHandler;
</script> |
See Also