Overview

In addition to the server side programming interface, EO.Web Controls also offers a complete set of client JavaScript APIs. This section covers them in three categories: objects, global functions and event handlers.

Objects

All EO.Web Control generates a client side object through which you can access many of the control functionalities on the client side with JavaScript. For example, with a server control EO.Web.Menu "Menu1" in the page, you can use the following code on the client side to display the total number of top level menu items:

<a href="javascript:window.alert(Menu1.getTopGroup().getItemCount())">
Show total number of top level menu items
</a>

The sample above first calls getTopGroup on client side Navigator object, which servers as base class of all client side navigational objects, including Menu object. getTopGroup returns a NavigationItemGroup object. The sample code then calls getItemCount on the returned NavigationItemGroup to acquire the total number of items.

The name of the client side object is the ClientID of the server control. Usually a control's ClientID is the same as the control's ID. But if the control is inside a NamingContainer, such as a user control, these two values would be different.

As an alternative, you can always call eo_GetObject global function to get a reference of the client side object. The function accepts both ID and ClientID.

Global Functions

A number of global functions are also provided. Some of them are shortcut for methods on certain objects. For example, the following code:

eo_Callback("Callback1");

is equivalent to:

Callback1.execute();

Some global functions offer functionalities that are not associated with a specific object. For example:

eo_StringToDate("2000-01-01");

calls global function eo_StringToDate to convert a string value to a JavaScript Date object.

Event Handlers

EO.Web Controls also support various client side events. For example, EO.Web Menu controls support ClientSideOnItemClick event. In order to handle client side event, you should first provide an event handler. For example:

function on_item_click(e, info)
{
    window.alert("item '" + info.getItem().getText() + "' clicked!");
}

Then assign the name of the event handler to the appropriate property:

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

At runtime when user clicks a menu item, the event handler will be called.

All event handlers are called with a predefined list of arguments. For example, the menu always calls ClientSideOnItemClick with two arguments: the first one being the DOM event object and the second one being a NavigatorEventInfo object. Return value of some event handlers are also significant.

Event Handlers section of the client API reference provides information about the argument list and the return value of these handlers.