Apply to

Source Code Location

Live demo is available at our website: http://www.essentialobjects.com/demo/default.aspx?id=menu_client_event.

Source code for demo project can be launched from:
Start -> Programs -> EO.Web Controls x.x -> EO.Web for ASP.NET x.x -> Live Demo

If your installation directory is "c:\Program Files\Essential Objects", then this demo is located at: "c:\Program Files\Essential Objects\EO.Web Controls 3.0\Net11\Samples\CS\Demos\Menu\Programming\Client Side Programming".
Demos for .NET 2.0 and VB are also available.

Overview

EO.Web navigation controls client side script offers several event interfaces to hook up customized event handlers. Using these events along with client side script interface empowers you to dynamically change the control without posting back to the server, for example, to check or uncheck an item, switch item text or icon.

This section covers these topics:

Using item's OnClickScript property to define client-side event handler code

You can use item's OnClickScript to handle OnClick event for each navigation item individually. For example:

<eo:MenuItem 
    OnClickScript="window.alert('hi!')">
</eo:MenuItem>    

Inside your script body, you can use global function eo_GetNavigatorEventInfo to retrieve a NavigatorEventInfo object that contains information about the control and item that raises the event. For example:

<eo:MenuItem 
    OnClickScript="eo_GetMenuEventInfo().getItem().setChecked(true)">
</eo:MenuItem>    

Using control's properties to define client-side event handler function name

You can also use control's properties to define the name of the client-side event handlers. The following lists the properties you can use:

[JavaScript]
function your_handler(e,  eventInfo)
{
   ...
}

[HTML]
<eo:Menu 
    ClientSideOnItemClick="ToggleCheckStatus">
    ...
</eo:Menu>                

[JavaScript]
function ToggleCheckStatus(e, eventInfo)
{
    eventInfo.getItem().setChecked(!eventInfo.getItem().getChecked());
}

Event Sequence

When a navigation item is clicked, client side events occur in the following order:

1. ASP.NET client side validates if CausesValidation is set to true;
2. Execute client side JavaScript defined in item's OnClickScript;
3. Execute client side JavaScript function which name is specified in control's ClientSideOnItemClick;
4. Redirect to NavigateUrl if specified;
5. ASP.NET server side validates if CausesValidation evaluates to true;
6. Execute server side ItemClick event handler;

Step 5 and 6 only occur if the control's "RaisesServerEvent" property is set to true.

Event Cancellation

You can cancel the OnClick event in event handling script. To cancel the event in OnClickScript, call global function eo_CancelEvent. For example:

<eo:MenuItem 
    OnClickScript="if (!window.confirm('Sure?') eo_CancelEvent();">
</eo:MenuItem>

To cancel the clicked event in ClientSideOnItemClick, use any one of the following ways:

• Call eo_CancelEvent, for example:

  [JavaScript]
  function ClickHandler(e, eventInfo)
  {
      if (!window.confirm("Sure?"))
          eo_CancelEvent();
  }
  

• - OR -
  Call cancel on the eventInfo parameter, for example:

  [JavaScript]
  function ClickHandler(e, eventInfo)
  {
      if (!window.confirm("Sure?"))
          eventInfo.cancel();
  }
  

• - OR -
  Return false, for example:

  [JavaScript]
  function ClickHandler(e, eventInfo) 
  { 
      if (!window.confirm("Sure?")) 
          return false; 
  }