Client Side Events

Creating event handlers in JavaScript

To handle a client-side event, create a JavaScript event handler function and assign its name to the respective script property of the control. The properties that contain the names of the JavaScript event handlers have the same name as the event with a Script suffix added, in the form of [EventName]Script. The signature of the handler should contain the sender and args parameters, where sender is always the control and args are the event arguments associated with the event. For each client-side event, there is a string property of the form [EventName]Script that specifies the respective JavaScript event handler function that should be called. In the Visual Studio Properties window, type in the name of the event handler function in the field of the respective event property, for example [EventName]Script = "onEventName".

Notification events

Notification events are raised to notify you that the user has performed some action e.g. itemClicked, dragStart, resizeEnd, close. The event arguments associated with notification events inherit Sys.EventArgs.

Validation events

Validation events let you approve or reject users actions. The event handler functions are expected to set the value of the Sys.CancelEventArgs cancel property accessible through the args parameter of the handler, either set_cancel(false) if an action should be accepted, or set_cancel(true) if it should be rejected. Such events are activeItemChanging, activeTabChanging and popupOpening. There are events raised when users start a certain interaction, for example resizeStart. When the user opens or closes a Window, the opening/closing event is raised to let you confirm the operation.

Examples

Disallow changing of the active tab in a TabControl.

JavaScript

function OnActiveTabChanging(sender, args)
{
    args.set_cancel(true);
}

Handle the controlLoaded event of a WindowHost control to maximize the active window.

JavaScript

function OnHostLoaded(sender)
{
    sender.getActiveWindow().set_windowState(MindFusion.UI.Web.WindowState.Maximized);
}

Handle Menu control's itemClick event.

JavaScript

function MenuItemClicked(sender, args)
{
    // get a reference to the clicked item.
    var item = args.getItem();
    if (item.get_rootItem().get_title() == "WindowHost" && item.get_title() == "Close all")
    {
        var host = $find("<%= WindowHost1.ClientID %>");
        host.closeAll();
    }
    else
    {
        // postback the page to handle the server event.
        sender.postback();
    }
}