Apply to

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:

function your_handler(e,  eventInfo)
{
   ...
}

<eo:Menu 
    ClientSideOnItemClick="ToggleCheckStatus">
    ...
</eo:Menu>

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

  Copy

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

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

  Copy

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

• - OR -
  Return false, for example:
  JavaScript

  Copy

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